WebHaptics

Haptic feedback for the mobile web. Supports React, Vue, and Svelte.

Install

npm i web-haptics

React

import { useWebHaptics } from "web-haptics/react";

function App() {
  const { trigger } = useWebHaptics();

  return <button onClick={() => trigger("success")}>Tap me</button>;
}

Vue

<script setup>
import { useWebHaptics } from "web-haptics/vue";

const { trigger } = useWebHaptics();
</script>

<template>
  <button @click="trigger('success')">Tap me</button>
</template>

Svelte

<script>
import { createWebHaptics } from "web-haptics/svelte";
import { onDestroy } from "svelte";

const { trigger, destroy } = createWebHaptics();
onDestroy(destroy);
</script>

<button on:click={() => trigger("success")}>Tap me</button>

Vanilla

import { WebHaptics } from "web-haptics";

const haptics = new WebHaptics();
haptics.trigger("success");

Built-in Presets

You can also pass custom patterns directly:

trigger([100, 50, 100]); // custom pattern
trigger(200); // single vibration
trigger({ pattern: [50, 50, 50], description: "custom", intensity: 0.8 }); // full preset

API

trigger(input?, options?)

Trigger haptic feedback.

• input — preset name ("success"), number, number[], or HapticPreset
• options.intensity — override intensity (0–1)

cancel()

Stop the current pattern and cancel any ongoing vibration.

WebHaptics.isSupported

Static boolean — true if the device supports the Vibration API.

License

MIT

Found this useful?

Follow me on Twitter.

Other projects

You might also like:

• Torph - Dependency-free animated text component.
• easing.dev - Easily create custom easing graphs.

Acknowledgements

• Special thanks to Alex for assistance with the site design.