useVibration

A React hook that provides an SSR-safe interface to interact with the device's physical vibration hardware.

Important

Vibrations can only be triggered after a user interaction (like a click) on the page. Programmatic vibrations without a prior gesture will be blocked by the browser.

Tip

You can create haptic feedback patterns by passing an array, such as [200, 100, 200], where values represent [vibrate, pause, vibrate].

Installation

bash

Description

The useVibration hook abstracts the navigator.vibrate API, allowing you to trigger haptic feedback through a single pulse or complex patterns (vibrate-pause sequences). It is designed to be unopinionated and safely handles environments where the API is unavailable, such as desktop browsers or Server-Side Rendering (SSR) contexts.

Return values

NameTypeDescription
cancel() => voidImmediately stops any ongoing vibration by calling the API with a 0 duration.
isSupportedbooleanIndicates if the browser and device hardware support the Vibration API.
vibrate(pattern: VibrationPattern) => booleanTriggers vibration based on a number (ms) or an array (vibrate/pause ms). Returns true if successful.

Demo

This component is loading.

Source code

tsx