refactor: replace Fp with Fingerprint in components, context, and exports

TheUnderScorer · TheUnderScorer · commit 64c0c9c9d999 · 2026-01-27T16:52:33.000+01:00
diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ Fingerprint is a device intelligence platform offering industry-leading accuracy
   - [Requirements](#requirements)
   - [Installation](#installation)
   - [Getting started](#getting-started)
-    - [1. Wrap your application (or component) in `<FpProvider>`.](#1-wrap-your-application-or-component-in-fpprovider)
+    - [1. Wrap your application (or component) in `<FingerprintProvider>`.](#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)
@@ -73,7 +73,7 @@ pnpm add @fingerprint/react
 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://docs.fingerprint.com/docs/quick-start-guide).
 
-### 1. Wrap your application (or component) in `<FpProvider>`.
+### 1. Wrap your application (or component) in `<FingerprintProvider>`.
 
 - 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://docs.fingerprint.com/docs/regions) during registration.
@@ -85,20 +85,20 @@ To get your API key and get started, see the [Fingerprint Pro Quick Start Guide]
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
-  FpProvider,
+  FingerprintProvider,
   FingerprintJSPro,
 } from '@fingerprint/react'
 import App from './App'
 
 const root = ReactDOM.createRoot(document.getElementById('app'))
 
-// <FpProvider /> supports the same options as `start()` function.
+// <FingerprintProvider /> supports the same options as `start()` function.
 root.render(
-  <FpProvider
+  <FingerprintProvider
     apiKey='your-public-api-key'
   >
     <App />
-  </FpProvider>
+  </FingerprintProvider>
 )
 ```
 
diff --git a/__tests__/fpjs-provider.test.tsx b/__tests__/fpjs-provider.test.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { renderHook } from '@testing-library/react'
-import { FpContext } from '../src'
+import { FingerprintContext } from '../src'
 import { createWrapper, getDefaultLoadOptions } from './helpers'
 import { version } from '../package.json'
 import { describe, it, expect, vi } from 'vitest'
@@ -10,7 +10,7 @@ vi.mock('@fingerprint/agent', { spy: true })
 
 const mockStart = vi.mocked(agent.start)
 
-describe('FpProvider', () => {
+describe('FingerprintProvider', () => {
   it('should configure an instance of the Fp Agent', async () => {
     const loadOptions = getDefaultLoadOptions()
     const wrapper = createWrapper({
@@ -20,7 +20,7 @@ describe('FpProvider', () => {
         duration: 100,
       },
     })
-    renderHook(() => useContext(FpContext), {
+    renderHook(() => useContext(FingerprintContext), {
       wrapper,
     })
     expect(mockStart).toHaveBeenCalledWith({
diff --git a/__tests__/helpers.tsx b/__tests__/helpers.tsx
@@ -1,17 +1,17 @@
 import { PropsWithChildren } from 'react'
-import { FpProvider, FpProviderOptions } from '../src'
+import { FingerprintProvider, FingerprintProviderOptions } from '../src'
 import { act } from '@testing-library/react'
 
 export const getDefaultLoadOptions = () => ({
   apiKey: 'test_api_key',
 })
 
 export const createWrapper =
-  (providerProps: Partial<FpProviderOptions> = {}) =>
+  (providerProps: Partial<FingerprintProviderOptions> = {}) =>
   ({ children }: PropsWithChildren<{}>) => (
-    <FpProvider {...getDefaultLoadOptions()} {...providerProps}>
+    <FingerprintProvider {...getDefaultLoadOptions()} {...providerProps}>
       {children}
-    </FpProvider>
+    </FingerprintProvider>
   )
 
 export const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
diff --git a/examples/create-react-app/src/in_memory_cache/InMemoryCache.tsx b/examples/create-react-app/src/in_memory_cache/InMemoryCache.tsx
@@ -1,11 +1,11 @@
-import { FpProvider } from '@fingerprint/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'
 
 function InMemoryCache() {
   return (
-    <FpProvider apiKey={FPJS_API_KEY} cache={{ storage: 'agent', duration: 'optimize-cost' }}>
+    <FingerprintProvider apiKey={FPJS_API_KEY} cache={{ storage: 'agent', duration: 'optimize-cost' }}>
       <div className='App'>
         <header className='header'>
           <h2>Solution with an in-memory cache</h2>
@@ -16,7 +16,7 @@ function InMemoryCache() {
         <Nav />
         <Outlet />
       </div>
-    </FpProvider>
+    </FingerprintProvider>
   )
 }
 
diff --git a/examples/create-react-app/src/local_storage_cache/LocalStorageCache.tsx b/examples/create-react-app/src/local_storage_cache/LocalStorageCache.tsx
@@ -1,11 +1,11 @@
 import { Outlet } from 'react-router-dom'
 import { Nav } from '../shared/components/Nav'
 import { FPJS_API_KEY } from '../shared/utils/env'
-import { FpProvider } from '@fingerprint/react'
+import { FingerprintProvider } from '@fingerprint/react'
 
 function LocalStorageCache() {
   return (
-    <FpProvider
+    <FingerprintProvider
       apiKey={FPJS_API_KEY}
       cache={{
         storage: 'localStorage',
@@ -21,7 +21,7 @@ function LocalStorageCache() {
         <Nav />
         <Outlet />
       </div>
-    </FpProvider>
+    </FingerprintProvider>
   )
 }
 
diff --git a/examples/create-react-app/src/no_cache/WithoutCache.tsx b/examples/create-react-app/src/no_cache/WithoutCache.tsx
@@ -1,11 +1,11 @@
-import { FpProvider } from '@fingerprint/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'
 
 function WithoutCache() {
   return (
-    <FpProvider apiKey={FPJS_API_KEY}>
+    <FingerprintProvider apiKey={FPJS_API_KEY}>
       <div className='App'>
         <header className='header'>
           <h2>Solution without cache</h2>
@@ -14,7 +14,7 @@ function WithoutCache() {
         <Nav />
         <Outlet />
       </div>
-    </FpProvider>
+    </FingerprintProvider>
   )
 }
 
diff --git a/examples/create-react-app/src/session_storage_cache/SessionStorageCache.tsx b/examples/create-react-app/src/session_storage_cache/SessionStorageCache.tsx
@@ -1,11 +1,11 @@
-import { FpProvider } from '@fingerprint/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'
 
 function SessionStorageCache() {
   return (
-    <FpProvider apiKey={FPJS_API_KEY} cache={{ storage: 'sessionStorage', duration: 60 * 5 }}>
+    <FingerprintProvider apiKey={FPJS_API_KEY} cache={{ storage: 'sessionStorage', duration: 60 * 5 }}>
       <div className='App'>
         <header className='header'>
           <h2>Solution with a custom implementation of a session storage cache</h2>
@@ -14,7 +14,7 @@ function SessionStorageCache() {
         <Nav />
         <Outlet />
       </div>
-    </FpProvider>
+    </FingerprintProvider>
   )
 }
 
diff --git a/examples/next-appDir/app/layout.tsx b/examples/next-appDir/app/layout.tsx
@@ -1,5 +1,5 @@
 import '../styles/globals.css'
-import { FpProvider } from '@fingerprint/react'
+import { FingerprintProvider } from '@fingerprint/react'
 import { PropsWithChildren } from 'react'
 
 const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string
@@ -8,7 +8,7 @@ function RootLayout({ children }: PropsWithChildren) {
   return (
     <html>
       <body>
-        <FpProvider apiKey={fpjsPublicApiKey}>{children}</FpProvider>
+        <FingerprintProvider apiKey={fpjsPublicApiKey}>{children}</FingerprintProvider>
       </body>
     </html>
   )
diff --git a/examples/next/pages/_app.tsx b/examples/next/pages/_app.tsx
@@ -1,14 +1,14 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
-import { FpProvider } from '@fingerprint/react'
+import { FingerprintProvider } from '@fingerprint/react'
 
 const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <FpProvider apiKey={fpjsPublicApiKey}>
+    <FingerprintProvider apiKey={fpjsPublicApiKey}>
       <Component {...pageProps} />
-    </FpProvider>
+    </FingerprintProvider>
   )
 }
 
diff --git a/examples/preact/src/index.tsx b/examples/preact/src/index.tsx
@@ -1,14 +1,14 @@
 import { FunctionalComponent } from 'preact'
 import './style/index.css'
 import App from './components/app'
-import { FpProvider } from '@fingerprint/react'
+import { FingerprintProvider } from '@fingerprint/react'
 
 const WrappedApp: FunctionalComponent = () => {
   const apiKey = process.env.PREACT_APP_FPJS_PUBLIC_API_KEY as string
   return (
-    <FpProvider apiKey={apiKey}>
+    <FingerprintProvider apiKey={apiKey}>
       <App />
-    </FpProvider>
+    </FingerprintProvider>
   )
 }
 
diff --git a/examples/vite/src/main.tsx b/examples/vite/src/main.tsx
@@ -2,14 +2,14 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
-import { FpProvider } from '@fingerprint/react'
+import { FingerprintProvider } from '@fingerprint/react'
 
 const apiKey = import.meta.env.VITE_FPJS_PUBLIC_API_KEY
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <FpProvider apiKey={apiKey}>
+    <FingerprintProvider apiKey={apiKey}>
       <App />
-    </FpProvider>
+    </FingerprintProvider>
   </StrictMode>
 )
diff --git a/examples/webpack-based/src/index.js b/examples/webpack-based/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { FpProvider } from '@fingerprint/react'
+import { FingerprintProvider } from '@fingerprint/react'
 import App from './App'
 
 const rootElement = document.getElementById('root')
@@ -9,8 +9,8 @@ const apiKey = process.env.REACT_APP_FPJS_PUBLIC_API_KEY
 
 root.render(
   <React.StrictMode>
-    <FpProvider apiKey={apiKey}>
+    <FingerprintProvider apiKey={apiKey}>
       <App />
-    </FpProvider>
+    </FingerprintProvider>
   </React.StrictMode>
 )
diff --git a/package.json b/package.json
@@ -2,14 +2,14 @@
   "name": "@fingerprint/react",
   "version": "3.0.0-test.2",
   "description": "FingerprintJS Pro React SDK",
-  "main": "dist/fp-react.js",
-  "module": "dist/fp-react.mjs",
-  "types": "dist/fp-react.d.ts",
+  "main": "dist/fingerprint-react.js",
+  "module": "dist/fingerprint-react.mjs",
+  "types": "dist/fingerprint-react.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/fp-react.d.ts",
-      "import": "./dist/fp-react.mjs",
-      "require": "./dist/fp-react.js"
+      "types": "./dist/fingerprint-react.d.ts",
+      "import": "./dist/fingerprint-react.mjs",
+      "require": "./dist/fingerprint-react.js"
     }
   },
   "keywords": [
@@ -35,7 +35,7 @@
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:coverage:diff": "vitest run --coverage --reporter json --outputFile.json=report.json",
-    "test:dts": "tsc --noEmit --isolatedModules dist/fp-react.d.ts",
+    "test:dts": "tsc --noEmit --isolatedModules dist/fingerprint-react.d.ts",
     "docs": "typedoc src/index.ts --out docs"
   },
   "files": [
diff --git a/src/components/fingerprint-provider.tsx b/src/components/fingerprint-provider.tsx
@@ -1,13 +1,13 @@
 import { PropsWithChildren, useCallback, useEffect, useMemo, useRef } from 'react'
-import { FpContext } from '../fp-context'
+import { FingerprintContext } from '../fingerprint-context'
 import { Agent, GetOptions, start, StartOptions } from '@fingerprint/agent'
 import * as packageInfo from '../../package.json'
 import { isSSR } from '../ssr'
 import { WithEnvironment } from './with-environment'
 import type { EnvDetails } from '../env.types'
 import { usePromiseStore } from '../utils/use-promise-store'
 
-export interface FpProviderOptions extends StartOptions {
+export interface FingerprintProviderOptions extends StartOptions {
   /**
    * If set to `true`, will force the agent to be rebuilt with the new options. Should be used with caution
    * since it can be triggered too often (e.g. on every render) and negatively affect performance of the JS agent.
@@ -18,11 +18,11 @@ export interface FpProviderOptions extends StartOptions {
 /**
  * @example
  * ```jsx
- * <FpProvider
+ * <FingerprintProvider
  *   apiKey="<your-fpjs-public-api-key>"
  * >
  *   <MyApp />
- * </FpProvider>
+ * </FingerprintProvider>
  * ```
  *
  * Provides the FpContext to its child components.
@@ -31,7 +31,7 @@ export interface FpProviderOptions extends StartOptions {
  * This is just a wrapper around the actual provider.
  * For the implementation, see `ProviderWithEnv` component.
  */
-export function FpProvider(props: PropsWithChildren<FpProviderOptions>) {
+export function FingerprintProvider(props: PropsWithChildren<FingerprintProviderOptions>) {
   const propsWithEnv = props as PropsWithChildren<ProviderWithEnvProps>
 
   return (
@@ -41,7 +41,7 @@ export function FpProvider(props: PropsWithChildren<FpProviderOptions>) {
   )
 }
 
-interface ProviderWithEnvProps extends FpProviderOptions {
+interface ProviderWithEnvProps extends FingerprintProviderOptions {
   /**
    * Contains details about the env we're currently running in (e.g. framework, version)
    */
@@ -77,7 +77,7 @@ function ProviderWithEnv({
 
   const getClient = useCallback(() => {
     if (isSSR()) {
-      throw new Error('FpProvider client cannot be used in SSR')
+      throw new Error('FingerprintProvider client cannot be used in SSR')
     }
 
     if (!clientRef.current) {
@@ -117,5 +117,5 @@ function ProviderWithEnv({
     }
   }, [forceRebuild, agentOptions, getOptions, createClient])
 
-  return <FpContext.Provider value={contextValue}>{children}</FpContext.Provider>
+  return <FingerprintContext.Provider value={contextValue}>{children}</FingerprintContext.Provider>
 }
diff --git a/src/fingerprint-context.ts b/src/fingerprint-context.ts
@@ -5,7 +5,7 @@ import { QueryResult } from './query'
 export type VisitorQueryResult = QueryResult<GetResult>
 
 const stub = (): never => {
-  throw new Error('You forgot to wrap your component in <FpProvider>.')
+  throw new Error('You forgot to wrap your component in <FingerprintProvider>.')
 }
 
 const initialContext = {
@@ -15,8 +15,8 @@ const initialContext = {
 /**
  * The Fingerprint Context
  */
-export interface FpContextInterface {
+export interface FingerprintContextInterface {
   getVisitorData: (config?: GetOptions) => Promise<GetResult>
 }
 
-export const FpContext = createContext<FpContextInterface>(initialContext)
+export const FingerprintContext = createContext<FingerprintContextInterface>(initialContext)
diff --git a/src/index.ts b/src/index.ts
@@ -1,10 +1,10 @@
 import * as Fingerprint from '@fingerprint/agent'
 
-export * from './fp-context'
-export * from './components/fp-provider'
+export * from './fingerprint-context'
+export * from './components/fingerprint-provider'
 export * from './use-visitor-data'
 
-export * from './fp-context'
+export * from './fingerprint-context'
 export * from './query'
 
 export { Fingerprint }
diff --git a/src/use-visitor-data.ts b/src/use-visitor-data.ts
diff --git a/vite.config.ts b/vite.config.ts
