native

Clipboard, share sheet, haptics, location, camera and fingerprint unlock, each with a web fallback.

Device featuresClient
/play/native/copy-link
Copy puts the link on your clipboard. Share opens the system share sheet when the browser has one.

What it is

@kitr/native is a native service with six capabilities: clipboard, share, haptics, geolocation, camera and biometrics. Each says whether it is supported, uses the browser API by default, and can be swapped for a native driver. React hooks wrap each one.

Runs in the browser and in desktop and mobile shells. For files, use files.

Install

kitr add native

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Adds @kitr/native and its provider. No config file. Every change.

Quick start

useClipboard() copies text and flips copied to true for 1.5 seconds, long enough for a "Copied" label:

// app/features/invoices/copy-invoice-link.tsx
import { useClipboard } from '@kitr/native/react'

export function CopyInvoiceLink({ invoiceId }: { invoiceId: string }) {
  const { copy, copied, supported } = useClipboard()
  if (!supported) return null
  const url = `https://app.acme.com/invoices/${invoiceId}`
  return (
    <button type="button" onClick={() => copy(url)}>
      {copied ? 'Copied' : 'Copy link'}
    </button>
  )
}

Click Copy link: the label reads Copied and the URL is on the clipboard. The button hides itself where there is no Clipboard API. Next in the guide: Copy your first link.

Built on

Capability Web driver built on
Clipboard Clipboard API
Share Web Share API
Haptics navigator.vibrate
Geolocation Geolocation API
Camera A file input with capture
Biometrics WebAuthn with the device's own authenticator

kitr adds the supported flag, UnsupportedError, the hooks, memory drivers for tests and a driver slot per capability.

Problems it solves

Further reading