Skip to content

useVibrate ​

Hook to use device vibration hardware.

Demo ​

INFO

The component uses useVibrate hook to know if vibrate is supported and to activate/deactivate vibration with two buttons.

Loading demo…
Show source code
tsx
import { useVibrate } from "../../../.."

export const UseVibrate = () => {
	const { isSupported, vibrate, cancel } = useVibrate();

	return <div>
		<p>Supported: {isSupported.toString()}</p>
		<button type="button" onClick={() => vibrate([200, 30, 200, 30, 200])}>Vibrate</button>
		<button type="button" onClick={cancel}>Cancel</button>
	</div>
}

Types ​

UseVibrateResult ​

Result object returned by useVibrate

PropertyTypeRequiredDescription
vibrate(pattern: VibratePattern) => void✓Trigger a vibration pattern using the Vibration API.
isSupportedboolean✓true when the Vibration API (navigator.vibrate) is available in the current environment.
cancel() => void✓function to stop vibrating.

Released under the MIT License.