-# Fingerprint Pro React
+# Fingerprint React
-Fingerprint is a device intelligence platform offering industry-leading accuracy. Fingerprint Pro React SDK is an easy way to integrate **[Fingerprint Pro](https://fingerprint.com/)** into your React application. It's also compatible with Next.js and Preact. See application demos in the [examples](https://github.com/fingerprintjs/fingerprintjs-pro-react/tree/main/examples) folder.
+Fingerprint is a device intelligence platform offering industry-leading accuracy. Fingerprint React SDK is an easy way to integrate **[Fingerprint](https://fingerprint.com/)** into your React application. It's also compatible with Next.js and Preact. See application demos in the [examples](https://github.com/fingerprintjs/react/tree/main/examples) folder.
## Table of contents
-- [Fingerprint Pro React](#fingerprint-pro-react)
+- [Fingerprint React](#fingerprint-react)
- [Table of contents](#table-of-contents)
- [Requirements](#requirements)
- [Installation](#installation)
- [Getting started](#getting-started)
- - [1. Wrap your application (or component) in ``.](#1-wrap-your-application-or-component-in-fpjsprovider)
+ - [1. Wrap your application (or component) in ``.](#1-wrap-your-application-or-component-in-FingerprintProvider)
- [2. Use the `useVisitorData()` hook in your components to identify visitors](#2-use-the-usevisitordata-hook-in-your-components-to-identify-visitors)
- [Linking and tagging information](#linking-and-tagging-information)
- [Caching strategy](#caching-strategy)
@@ -46,69 +46,59 @@ Fingerprint is a device intelligence platform offering industry-leading accuracy
- For Typescript users: Typescript 4.8 or higher
> [!NOTE]
-> This package assumes you have a Fingerprint Pro subscription or trial, it is not compatible with the [source-available FingerprintJS](https://github.com/fingerprintjs/fingerprintjs). See our documentation to learn more about the [differences between Fingerprint Pro and FingerprintJS](https://dev.fingerprint.com/docs/identification-vs-fingerprintjs).
+> This package assumes you have a Fingerprint subscription or trial, it is not compatible with the [source-available FingerprintJS](https://github.com/fingerprintjs/fingerprintjs). See our documentation to learn more about the [differences between Fingerprint and FingerprintJS](https://docs.fingerprint.com/docs/identification-vs-fingerprintjs).
## Installation
Using [npm](https://npmjs.org):
```sh
-npm install @fingerprintjs/fingerprintjs-pro-react
+npm install @fingerprint/react
```
Using [yarn](https://yarnpkg.com):
```sh
-yarn add @fingerprintjs/fingerprintjs-pro-react
+yarn add @fingerprint/react
```
Using [pnpm](https://pnpm.js.org):
```sh
-pnpm add @fingerprintjs/fingerprintjs-pro-react
+pnpm add @fingerprint/react
```
## Getting started
-In order to identify visitors, you'll need a Fingerprint Pro account (you can [sign up for free](https://dashboard.fingerprint.com/signup/)).
-To get your API key and get started, see the [Fingerprint Pro Quick Start Guide](https://dev.fingerprint.com/docs/quick-start-guide).
+In order to identify visitors, you'll need a Fingerprint account (you can [sign up for free](https://dashboard.fingerprint.com/signup/)).
+To get your API key and get started, see the [Fingerprint Quick Start Guide](https://docs.fingerprint.com/docs/quick-start-guide).
-### 1. Wrap your application (or component) in ``.
+### 1. Wrap your application (or component) in ``.
- Set `apiKey` to your Fingerprint [Public API Key](https://dashboard.fingerprint.com/api-keys).
-- Set `region` if you have chosen a non-global [region](https://dev.fingerprint.com/docs/regions) during registration.
-- Set `endpoint` and `scriptUrlPattern` if you are using [one of our proxy integrations to increase accuracy](https://dev.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) and effectiveness of visitor identification.
-- You can use all the [load options](https://dev.fingerprint.com/reference/load-function#load-options) available in the JavaScript agent `load` function.
+- Set `region` if you have chosen a non-global [region](https://docs.fingerprint.com/docs/regions) during registration.
+- Set `endpoint` if you are using [one of our proxy integrations to increase accuracy](https://docs.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) and effectiveness of visitor identification.
+- You can use all the [start options](https://docs.fingerprint.com/reference/js-agent-v4-start-function#start-options) available in the JavaScript agent `load` function.
```jsx
// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import {
- FpjsProvider,
+ FingerprintProvider,
FingerprintJSPro,
-} from '@fingerprintjs/fingerprintjs-pro-react'
+} from '@fingerprint/react'
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('app'))
+// supports the same options as `start()` function.
root.render(
- //loader_v.js',
- FingerprintJSPro.defaultScriptUrlPattern,
- ],
- }}
+
-
+
)
```
@@ -117,10 +107,10 @@ root.render(
```jsx
// src/App.js
import React from 'react'
-import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'
+import { useVisitorData } from '@fingerprint/react'
function App() {
- const { isLoading, error, data } = useVisitorData()
+ const { isLoading, error, isFetched, data } = useVisitorData()
if (isLoading) {
return
Loading...
@@ -129,16 +119,11 @@ function App() {
return
An error occured: {error.message}
}
- if (data) {
- // Perform some logic based on the visitor data
- return (
-
) as FunctionComponent
render(
diff --git a/contributing.md b/contributing.md
index 01139fc1..27d99486 100644
--- a/contributing.md
+++ b/contributing.md
@@ -1,4 +1,4 @@
-# Contributing to FingerprintJS Pro React integration
+# Contributing to Fingerprint React integration
## Working with code
@@ -16,9 +16,7 @@ There are 4 demo pages for this integration:
4. In `/examples/preact` folder. It is a demo built with Preact. You can find more info about configuration and starting demo in the [readme](examples/preact/README.md).
5. In `/examples/webpack-based` folder. It is a simple demo built with raw webpack.
-If you want to test integration with [fingerprintjs-pro-spa](https://github.com/fingerprintjs/fingerprintjs-pro-spa), just [link the package](https://pnpm.io/cli/link#replace-an-installed-package-with-a-local-version-of-it) with the `pnpm link `.
-
-❗ Build projects before testing integration. First build `fingerprintjs-pro-spa`, then `fingerprintjs-pro-react`, and then start spa example app.
+❗ Build projects before testing integration. First build the `@fingerprint/react` package, and then start any of the example apps.
### How to build
@@ -44,7 +42,7 @@ pnpm lint:fix
### How to test
-Tests are located in `__tests__` folder and run by [jest](https://jestjs.io/) in [jsdom](https://github.com/jsdom/jsdom) environment.
+Tests are located in `__tests__` folder and run by [vitest](https://vitest.dev/) in [jsdom](https://github.com/jsdom/jsdom) environment.
To run tests you can use IDE instruments or just run:
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
index a0944e23..c9ffb619 100644
--- a/examples/create-react-app/package.json
+++ b/examples/create-react-app/package.json
@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
- "@fingerprintjs/fingerprintjs-pro-react": "workspace:*",
+ "@fingerprint/react": "workspace:*",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1"
},
diff --git a/examples/create-react-app/src/in_memory_cache/InMemoryCache.tsx b/examples/create-react-app/src/in_memory_cache/InMemoryCache.tsx
index d9ba36e1..0e552a59 100644
--- a/examples/create-react-app/src/in_memory_cache/InMemoryCache.tsx
+++ b/examples/create-react-app/src/in_memory_cache/InMemoryCache.tsx
@@ -1,17 +1,11 @@
-import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'
-import { useState } from 'react'
+import { FingerprintProvider } from '@fingerprint/react'
import { Outlet } from 'react-router-dom'
import { FPJS_API_KEY } from '../shared/utils/env'
import { Nav } from '../shared/components/Nav'
-import { CacheLocation, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-spa'
function InMemoryCache() {
- const [loadOptions] = useState({
- apiKey: FPJS_API_KEY,
- })
-
return (
-
+
Solution with an in-memory cache
@@ -22,7 +16,7 @@ function InMemoryCache() {
-
+
)
}
diff --git a/examples/create-react-app/src/local_storage_cache/LocalStorageCache.tsx b/examples/create-react-app/src/local_storage_cache/LocalStorageCache.tsx
index 9e625d61..0524e684 100644
--- a/examples/create-react-app/src/local_storage_cache/LocalStorageCache.tsx
+++ b/examples/create-react-app/src/local_storage_cache/LocalStorageCache.tsx
@@ -1,21 +1,17 @@
-import { useState } from 'react'
import { Outlet } from 'react-router-dom'
import { Nav } from '../shared/components/Nav'
import { FPJS_API_KEY } from '../shared/utils/env'
-import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'
-import { CacheLocation, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-spa'
+import { FingerprintProvider } from '@fingerprint/react'
function LocalStorageCache() {
- const [loadOptions] = useState({
- apiKey: FPJS_API_KEY,
- })
-
return (
-
@@ -25,7 +21,7 @@ function LocalStorageCache() {
-
+
)
}
diff --git a/examples/create-react-app/src/no_cache/WithoutCache.tsx b/examples/create-react-app/src/no_cache/WithoutCache.tsx
index eeee4260..829e8e2e 100644
--- a/examples/create-react-app/src/no_cache/WithoutCache.tsx
+++ b/examples/create-react-app/src/no_cache/WithoutCache.tsx
@@ -1,17 +1,11 @@
-import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'
-import { useState } from 'react'
+import { FingerprintProvider } from '@fingerprint/react'
import { Outlet } from 'react-router-dom'
import { Nav } from '../shared/components/Nav'
import { FPJS_API_KEY } from '../shared/utils/env'
-import { CacheLocation, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-spa'
function WithoutCache() {
- const [loadOptions] = useState({
- apiKey: FPJS_API_KEY,
- })
-
return (
-
+
Solution without cache
@@ -20,7 +14,7 @@ function WithoutCache() {
-
+
)
}
diff --git a/examples/create-react-app/src/session_storage_cache/SessionStorageCache.tsx b/examples/create-react-app/src/session_storage_cache/SessionStorageCache.tsx
index 4d66dc2b..f76addca 100644
--- a/examples/create-react-app/src/session_storage_cache/SessionStorageCache.tsx
+++ b/examples/create-react-app/src/session_storage_cache/SessionStorageCache.tsx
@@ -1,17 +1,11 @@
-import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'
-import { useState } from 'react'
+import { FingerprintProvider } from '@fingerprint/react'
import { Outlet } from 'react-router-dom'
import { Nav } from '../shared/components/Nav'
import { FPJS_API_KEY } from '../shared/utils/env'
-import { CacheLocation, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-spa'
function SessionStorageCache() {
- const [loadOptions] = useState({
- apiKey: FPJS_API_KEY,
- })
-
return (
-
+
Solution with a custom implementation of a session storage cache
@@ -20,7 +14,7 @@ function SessionStorageCache() {