### FingerprintProvider Setup

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Wrap your application or a component with FingerprintProvider and configure it with your API key and other options.

```APIDOC
## FingerprintProvider Setup

### Description
Wrap your application (or component) in `<FingerprintProvider>` to enable FingerprintJS functionality.

### Props
- `apiKey` (string) - Required - Your Fingerprint Public API Key.
- `region` (string) - Optional - The region for Fingerprint API requests.
- `endpoints` (object) - Optional - Custom endpoints for proxy integrations.
- `cache` (object) - Optional - Configuration for caching visitor data.
  - `storage` (string) - e.g., 'sessionStorage', 'localStorage'.
  - `duration` (number) - Cache duration in seconds.

### Example
```jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { FingerprintProvider } from '@fingerprint/react'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('app'))

root.render(
  <FingerprintProvider
    apiKey='your-public-api-key'
    cache={{ storage: 'sessionStorage', duration: 3600 }}
  >
    <App />
  </FingerprintProvider>
)
```
```

--------------------------------

### Install @fingerprint/react with npm

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Use this command to add the Fingerprint React SDK to your project using npm.

```sh
npm install @fingerprint/react
```

--------------------------------

### Install @fingerprint/react with pnpm

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Use this command to add the Fingerprint React SDK to your project using pnpm.

```sh
pnpm add @fingerprint/react
```

--------------------------------

### Install @fingerprint/react with yarn

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Use this command to add the Fingerprint React SDK to your project using yarn.

```sh
yarn add @fingerprint/react
```

--------------------------------

### Expand ESLint with React-Specific Rules

Source: https://github.com/fingerprintjs/react/blob/main/examples/vite/README.md

Integrate additional ESLint plugins like `eslint-plugin-react-x` and `eslint-plugin-react-dom` for enhanced React and React DOM linting. Ensure you have installed these plugins.

```javascript
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

--------------------------------

### Manually Fetch Visitor Data with getData

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Use the `getData` method returned by `useVisitorData` to fetch visitor data on demand, for example, after a user action. Pass `{ immediate: false }` to `useVisitorData` to disable automatic fetching on render. Handles asynchronous data fetching and potential errors.

```jsx
import React, { useState } from 'react'
import { useVisitorData } from '@fingerprint/react'

function App() {
  const { isLoading, error, getData } = useVisitorData(
    { immediate: false }
  )
  const [email, setEmail] = useState('')

  if (isLoading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>An error occurred: {error.message}</div>
  }

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          getData()
            .then((data) => {
              // Do something with the visitor data, for example,
              // append visitor data to the form data to send to your server
              console.log(data.visitor_id)
            })
            .catch((error) => {
              // Handle error
            })
        }}
      >
        <label htmlFor='email'>Email:</label>
        <input
          type='email'
          value={email}
          onChange={(e) => setEmail(e.currentTarget.value)}
        />
        <button type='submit'>Subscribe</button>
      </form>
    </div>
  )
}

export default App
```

--------------------------------

### Build the Project with pnpm

Source: https://github.com/fingerprintjs/react/blob/main/contributing.md

Run this command to build the `@fingerprint/react` package before testing integration.

```shell
pnpm build
```

--------------------------------

### Check TypeScript Declarations

Source: https://github.com/fingerprintjs/react/blob/main/contributing.md

After building the project, run this command to verify the correctness of the distributive TypeScript declarations.

```shell
pnpm test:dts
```

--------------------------------

### Initialize FingerprintProvider in React App

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Wrap your application's root component with FingerprintProvider. Configure it with your public API key and optional settings like caching. This sets up the FingerprintJS agent for your entire app.

```jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { FingerprintProvider } from '@fingerprint/react'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('app'))

// <FingerprintProvider /> supports the same options as `start()` function.
root.render(
  <FingerprintProvider
    apiKey='your-public-api-key'
    cache={{ storage: 'sessionStorage', duration: 3600 }}
  >
    <App />
  </FingerprintProvider>
)
```

--------------------------------

### Run Tests with Vitest

Source: https://github.com/fingerprintjs/react/blob/main/contributing.md

Execute this command to run all project tests using Vitest in a JSDOM environment.

```shell
pnpm test
```

--------------------------------

### Check Code Style with ESLint

Source: https://github.com/fingerprintjs/react/blob/main/contributing.md

Use this command to verify that the code adheres to the project's style guidelines enforced by ESLint.

```shell
pnpm lint
```

--------------------------------

### Linking and Tagging Information

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Associate visitor IDs with your own data using linkedId and tag options.

```APIDOC
## Linking and Tagging Information

### Description
Associate the visitor ID with your data using the `linkedId` or `tag` parameter. This is useful for correlating Fingerprint data with your internal user or event identifiers.

### Usage
Pass `linkedId` and `tag` as part of the options object to `useVisitorData()` or the `getData` function.

- `linkedId` (string): Your unique identifier for the user or session.
- `tag` (object): An object containing custom key-value pairs for additional context.

### Example
```jsx
// ...
function App() {
  const { isLoading, error, getData } = useVisitorData({
    linkedId: 'user_1234',
    tag: {
      userAction: 'login',
      analyticsId: 'UA-5555-1111-1',
    },
  })
}
// ...
```
```

--------------------------------

### Fix Code Style Issues with ESLint

Source: https://github.com/fingerprintjs/react/blob/main/contributing.md

Execute this command to automatically fix code style issues. Note that not all issues can be resolved automatically.

```shell
pnpm lint:fix
```

--------------------------------

### useVisitorData Hook

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Use the useVisitorData hook to fetch visitor data within your React components.

```APIDOC
## useVisitorData Hook

### Description
Use the `useVisitorData()` hook in your components to identify visitors. It provides loading, error, and data states.

### Usage
```jsx
import { useVisitorData } from '@fingerprint/react'

function App() {
  const { isLoading, error, isFetched, data } = useVisitorData()

  if (isLoading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>An error occurred: {error.message}</div>
  }

  if (isFetched) {
    return <div>Welcome {data.visitor_id}!</div>
  }
  
  return null
}
```

### Options
- `{ immediate: false }` - Pass this option to disable automatic visitor identification on render.
- `linkedId` (string) - Associate the visitor ID with your own identifier.
- `tag` (object) - Add custom tags for analytics or other purposes.

### Example with `immediate: false` and `getData`
```jsx
import React, { useState } from 'react'
import { useVisitorData } from '@fingerprint/react'

function App() {
  const { isLoading, error, getData } = useVisitorData(
    { immediate: false } // Disable automatic identification
  )
  const [email, setEmail] = useState('')

  if (isLoading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>An error occurred: {error.message}</div>
  }

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          getData()
            .then((data) => {
              console.log(data.visitor_id)
            })
            .catch((error) => {
              // Handle error
            })
        }}
      >
        <label htmlFor='email'>Email:</label>
        <input
          type='email'
          value={email}
          onChange={(e) => setEmail(e.currentTarget.value)}
        />
        <button type='submit'>Subscribe</button>
      </form>
    </div>
  )
}
```

### Response Data
The returned v4 visitor data uses raw response field names in snake_case, for example `visitor_id` and `event_id`.
```

--------------------------------

### Expand ESLint for Type-Checked Rules

Source: https://github.com/fingerprintjs/react/blob/main/examples/vite/README.md

Update your ESLint configuration to enable type-aware lint rules for production applications. This configuration uses recommended type-checked rules from tseslint.

```javascript
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

--------------------------------

### Use useVisitorData Hook for Visitor Identification

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Fetch visitor data automatically on component render using the useVisitorData hook. Handles loading and error states. Displays the visitor ID once data is fetched.

```jsx
import React from 'react'
import { useVisitorData } from '@fingerprint/react'

function App() {
  const { isLoading, error, isFetched, data } = useVisitorData()

  if (isLoading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>An error occurred: {error.message}</div>
  }

  if (isFetched) {
    return <div>Welcome {data.visitor_id}!</div>
  }
  
  return null
}

export default App
```

--------------------------------

### Associate Custom Data with Visitor ID

Source: https://github.com/fingerprintjs/react/blob/main/README.md

Enhance visitor identification by associating custom data like user IDs or event tags using the `linkedId` and `tag` options within `useVisitorData` or `getData`. This helps in linking Fingerprint data with your application's internal data.

```jsx
// ...
function App() {
  const { isLoading, error, getData } = useVisitorData({
    linkedId: 'user_1234',
    tag: {
      userAction: 'login',
      analyticsId: 'UA-5555-1111-1',
    },
  })
}
// ...
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.