> ## Documentation Index
> Fetch the complete documentation index at: https://docs.endstate.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> The useNfcReader hook: connection state, scanning, and mock mode for developing without hardware.

The `/react` subpath ships a lifecycle hook that owns reader resolution,
connect/start sessions, per-tag debouncing, and permission surfacing. React is
an optional peer dependency needed only for this subpath.

```tsx theme={null}
import { useNfcReader } from "@endstate-sdk/reader/react";

const {
  isScanning,
  error,
  needsAuthorization,
  startScanning,
  stopScanning,
  requestDevice,
} = useNfcReader({
  onTap: ({ chipId, e, c }) => {
    /* … */
  },
  // Scan as soon as an already-authorized reader connects, with no click.
  // Without this, a return visit connects silently and then sits idle.
  autoStartWhenGranted: true,
});

// Pairing: only while the browser has not been given a reader yet.
{
  needsAuthorization && <button onClick={requestDevice}>Connect reader</button>;
}
// Scanning: for a reader that is connected but stopped.
{
  !needsAuthorization &&
    (isScanning ? (
      <button onClick={stopScanning}>Stop</button>
    ) : (
      <button onClick={startScanning}>Start scanning</button>
    ));
}
```

The hook reconnects silently on mount (`autoConnect`, default true) and
exposes `connectionState` plus `needsAuthorization`, so a "Connect reader"
button can be rendered only while one is actually needed. Pair it with
`autoStartWhenGranted` so a reader that reconnects on a later visit starts
scanning instead of waiting for a click that has nothing left to authorize.

## Develop without hardware

Pass `mockWhenUnavailable: true` and drive the flow with `fakeTap` - and pair
it with [test chips](/guides/testing-without-hardware) to exercise the full
API loop end to end, no reader or encoded chips required.