Newman's Personal Motorcade

    @fingerprintjs/fingerprintjs-pro-svelte
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    Fingerprint

    Release status Tests status Current NPM version Monthly downloads from NPM MIT license Discord server

    FingerprintJS Pro Svelte

    FingerprintJS Pro Svelte is an easy-to-use Svelte library for FingerprintJS Pro that also works with svelte-kit. Example apps can be found in the examples folder. This package works with FingerprintJS Pro, it is not compatible with open-source FingerprintJS. You can learn more about the difference between FingerprintJS Pro and open-source FingerprintJS in the official documentation.

    Installation

    yarn add @fingerprintjs/fingerprintjs-pro-svelte

    Or:

    npm install @fingerprintjs/fingerprintjs-pro-svelte

    Getting started

    In order to identify visitors, you'll need a FingerprintJS Pro account (you can sign up for free). You can learn more about API keys in the official FingerprintJS Pro documentation.

    1. Wrap your application (or component) in FpjsProvider. You can specify multiple configuration options.
      Set a region if you have chosen a non-global region during registration. Please refer to the Regions page.
    <script>
      import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-svelte';
      import VisitorData from './VisitorData.svelte';
    
      const options = {
        loadOptions: {
          apiKey: '<YOUR_API_KEY>',
        },
      };
    </script>
    
    // App.svelte
    <FpjsProvider {options}>
      <VisitorData />
    </FpjsProvider>
    1. Use the useVisitorData function in your svelte components to perform visitor identification and get the data.
    <script>
      import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-svelte';
    
      // Set to true fo fetch data when component is mounted
      export let immediate = false;
    
      const { getData, data, isLoading, error } = useVisitorData({ extendedResult: true }, { immediate });
    
      $: {
        if ($data) {
          // Do something with visitorData here
        }
      }
    </script>
    
    // VisitorData.svelte
    <div>
      <button id="get_data" on:click={() => getData()}> Get data</button>
      {#if $isLoading}
        <div id="loading">Loading...</div>
      {/if}
      {#if $error}
        <div id="error">Error occurred: {$error.message}</div>
      {/if}
      {#if $data}
        <div>
          <!--visitorData is available here!-->
        </div>
      {/if}
    </div>

    See the full code in example apps located in examples folder.

    Caching strategy

    ⚠️ WARNING If you use data from extendedResult, please pay additional attention to caching strategy.

    FingerprintJS Pro uses API calls as the basis for billing. Our best practices strongly recommend using cache to optimise API calls rate. The Library uses the SessionStorage cache strategy by default.

    Some fields from the extendedResult (e.g ip or lastSeenAt) might change for the same visitor. If you need exact current data, it is recommended to pass ignoreCache=true inside getData function.

    Documentation

    You can find API reference here.

    This library uses FingerprintJS Pro agent internally. The documentation for the FingerprintJS Pro agent is available on https://dev.fingerprint.com/docs.

    Install

    npm i @fingerprintjs/fingerprintjs-pro-svelte

    DownloadsWeekly Downloads

    11

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    303 kB

    Total Files

    77

    Last publish

    Collaborators

    • fp-pro
    • surgie