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

# Preact

The [Fingerprint React SDK](https://github.com/fingerprintjs/react) is an easy way to integrate Fingerprint into your Preact application. It supports all capabilities of the JavaScript agent and provides a built-in caching mechanism. You can view our [React quickstart](/docs/react-quickstart) for a step-by-step guide to get started.

### How to install

Add `@fingerprint/react` as a dependency to your application via npm or yarn.

<CodeGroup>
  ```shell NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprint/react
  ```

  ```shell Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprint/react
  ```

  ```shell PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprint/react
  ```
</CodeGroup>

Wrap your application (or component) in `FingerprintProvider`. You need to specify your public API key and other configuration options based on your chosen region and active integration.

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
// src/components/app.js
import { FingerprintProvider } from '@fingerprint/react';
import Home from '../routes/home';

export default function Wrapper() {
  return (
    <FingerprintProvider apiKey="PUBLIC_API_KEY" endpoints="https://metrics.yourwebsite.com">
      <Home />
    </FingerprintProvider>
  );
}
```

Use the `useVisitorData` hook in your components to identify visitors.

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
// src/routes/home/index.js
import { useVisitorData } from '@fingerprint/react';

export default function Home() {
  const { isLoading, error, data, getData } = useVisitorData({ immediate: true });

  return (
    <div id="preact_root">
      <button onClick={() => getData()}>Reload data</button>
      <p>Visitor ID: {isLoading ? 'Loading...' : data?.visitor_id}</p>
      <p>Full visitor data:</p>
      <pre>{error ? error.message : JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
```

> Note: The Fingerprint React SDK is available as an NPM package. If you are using Preact without a build tool, you can [use the JavaScript agent directly](/reference/js-agent) by importing it from our CDN.

### Documentation

You can find the full documentation in the official [GitHub repository](https://github.com/fingerprintjs/react). The repository also contains [an example app](https://github.com/fingerprintjs/react/tree/main/examples/preact) demonstrating usage of the library.

### Migration guide for React SDK v3.0.0

You can find the migration guide on the [React SDK page](/docs/react).