Skip to main content
Home

Built and signed on GitHub Actions

Works with
This package works with Node.js, Deno, Bun, BrowsersIt is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Bun
This package works with Browsers
JSR Score100%
Published2 months ago (1.1.13)

A convenient React hook that utilizes input[switch] introduced in Safari 18.0 to trigger haptic feedback anytime, anywhere in your application.

use-haptic 📳

A convenient React hook to trigger haptic feedback anywhere in your application

CI npm package downloads

Try Demo!

✨ Overview

This package utilizes the input[switch] element introduced in Safari 18.0 to trigger haptic feedback anytime, anywhere in your React application.

🚀 Features

  • ✅ Trigger haptic feedback at any time in your React application
  • ✅ Support iOS, Android
  • ✅ Simple, intuitive API
  • ✅ Native TypeScript support by 🦕
  • ✅ ESM / CJS compatible
  • ✅ jsr / npm compatible

📦 Installation

npm install use-haptic
yarn add use-haptic
pnpm install use-haptic
bun add use-haptic
deno add jsr:@posaune0423/use-haptic

🔧 Usage

import { useHaptic } from "use-haptic";

function HapticButton() {
  const { triggerHaptic } = useHaptic();
  return <button onClick={triggerHaptic}>Feel Haptic</button>;
}

🏃‍♂️ Quick Start

Clone the repository and run the sample app:

git clone https://github.com/posaune0423/use-haptic.git
cd sample/deno-vite-react
deno task dev

You can visit the demo page by scanning the QR code displayed in the terminal.

🧰 Development

Publishing to npm

This package uses dnt for npm package preparation:

# Build the package
deno run -A scripts/build_npm.ts <version>

# Publish to npm
cd npm
npm publish

📄 License

MIT

Built and signed on
GitHub Actions

Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@posaune0423/use-haptic

Import symbol

import * as use_haptic from "@posaune0423/use-haptic";
or

Import directly with a jsr specifier

import * as use_haptic from "jsr:@posaune0423/use-haptic";

Add Package

pnpm i jsr:@posaune0423/use-haptic
or (using pnpm 10.8 or older)
pnpm dlx jsr add @posaune0423/use-haptic

Import symbol

import * as use_haptic from "@posaune0423/use-haptic";

Add Package

yarn add jsr:@posaune0423/use-haptic
or (using Yarn 4.8 or older)
yarn dlx jsr add @posaune0423/use-haptic

Import symbol

import * as use_haptic from "@posaune0423/use-haptic";

Add Package

vlt install jsr:@posaune0423/use-haptic

Import symbol

import * as use_haptic from "@posaune0423/use-haptic";

Add Package

npx jsr add @posaune0423/use-haptic

Import symbol

import * as use_haptic from "@posaune0423/use-haptic";

Add Package

bunx jsr add @posaune0423/use-haptic

Import symbol

import * as use_haptic from "@posaune0423/use-haptic";