DOCSEARCHbyAlgolia
Submit Docs

WebHaptics

repository·main·Indexed 25 days ago

https://github.com/lochie/web-haptics

A library providing haptic feedback capabilities for mobile web applications. It includes a core WebHaptics class for vanilla TypeScript and specialized integrations for React (useWebHaptics hook), Vue (useWebHaptics hook), and Svelte (createWebHaptics function). The library supports built-in presets like success, nudge, error, and buzz, as well as custom vibration patterns using durations, intensities, and delays.

Tokens
4.4K
Snippets
17
Records
36
Agent score
79%

What's inside web-haptics

  2. Install web-haptics

    main

    Install the web-haptics library via npm to add tactile feedback to your web applications. The library uses the Web Vibration API and silently no-ops on unsupported platforms like desktop browsers, so no feature detection is required.

    npm i web-haptics

  4. Follow Apple HIG design rules for haptics

    main

    To ensure a high-quality user experience, follow these design principles:

    1. Supplement, don't replace: Always pair haptics with visual feedback. The UI must remain functional without haptics.
    2. Causal relationships: The haptic should feel like a direct physical consequence of the user action.
    3. Match intensity to significance: Use light/selection for small interactions, medium/success for standard actions, and heavy/error/warning for major changes.
    4. Avoid overuse: Reserve haptics for meaningful moments to prevent user fatigue.
    5. Synchronize perfectly: Fire the haptic at the exact instant the visual change occurs.
    6. Respect conventions: Use success for positive outcomes, error for negative, warning for caution, and selection for discrete ticks.
    7. Async operations: For async tasks, trigger the haptic when the result arrives, synced with the visual state change.
    try {
  await submit();
  haptic.trigger("success");
} catch {
  haptic.trigger("error");
}

  6. Integrate web-haptics with Vanilla JavaScript

    main

    For vanilla JS environments, instantiate the WebHaptics class directly.

    import { WebHaptics } from "web-haptics";

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

  8. Use web-haptics in React

    main

    To use haptics in a React application, import the useWebHaptics hook from web-haptics/react. The hook returns a trigger function that accepts a haptic pattern name (e.g., "success") to execute feedback on user interaction.

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

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

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

  9. Use WebHaptics in Vue

    main

    Use the useWebHaptics hook from web-haptics/vue within your Vue components via <script setup> to access the trigger function.

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

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

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

  10. Integrate web-haptics with Svelte

    main

    In Svelte, use createWebHaptics from web-haptics/svelte. Remember to call haptic.destroy() in the onDestroy lifecycle hook to clean up.

    <script>
  import { createWebHaptics } from "web-haptics/svelte";
  import { onDestroy } from "svelte";
  const haptic = createWebHaptics();
  onDestroy(() => haptic.destroy());
</script>

<button on:click={() => haptic.trigger()}>Tap me</button>

  11. Integrate web-haptics with Vue

    main

    In Vue, use the useWebHaptics hook from web-haptics/vue within a <script setup> block.

    <script setup>
import { useWebHaptics } from "web-haptics/vue";
const haptic = useWebHaptics();
</script>

<template>
  <button @click="haptic.trigger()">Tap me</button>
</template>

  12. Integrate web-haptics with React

    main

    In React, use the useWebHaptics hook from web-haptics/react. If using Next.js, ensure you add the "use client" directive to any component using this hook.

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

const haptic = useWebHaptics();

<button onClick={() => haptic.trigger()}>Tap me</button>;