Skip to main content

​
Installation

WebHaptics is available as an npm package with support for all major package managers.

​
Package Manager

Install the library using your preferred package manager: 
npm install web-haptics

​
Framework Setup

WebHaptics provides separate entry points for different frameworks. Import from the appropriate path:

​
React

import { useWebHaptics } from 'web-haptics/react';
Requires React 18 or higher

​
Vue

import { useWebHaptics } from 'web-haptics/vue';
Requires Vue 3 or higher

​
Svelte

import { createWebHaptics } from 'web-haptics/svelte';
Requires Svelte 4 or higher

​
Vanilla JavaScript

import { WebHaptics } from 'web-haptics';

​
TypeScript Configuration

WebHaptics includes built-in TypeScript definitions. No additional @types packages are needed. If you’re using TypeScript, ensure your tsconfig.json includes: 
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ES2020"
  }
}

​
Verifying Installation

Test your installation with a simple haptic trigger: 
import { useWebHaptics } from 'web-haptics/react';

function TestComponent() {
  const { trigger, isSupported } = useWebHaptics();

  if (!isSupported) {
    return <div>Haptics not supported on this device</div>;
  }

  return (
    <button onClick={() => trigger('medium')}>
      Test Haptics
    </button>
  );
}
Open your app on a mobile device or emulator to test haptic feedback. Most desktop browsers don’t support the Vibration API.

​
Next Steps

Quick Start

Create your first haptic interaction

API Reference

Explore available methods and options

Build docs developers (and LLMs) love

Get started for freeTalk to us