Why use FingerprintJS Pro Svelte library

FingerprintJS Pro Svelte is an official open-source package for the Svelte ecosystem. This library provides developers with native experience using Svelte components together with a built-in caching mechanism. All FingerprintJS Pro agent capabilities are fully supported.

Sample usage

  1. Add @fingerprintjs/fingerprintjs-pro-svelte as a dependency to your application via npm or yarn.
npm install @fingerprintjs/fingerprintjs-pro-svelte
yarn add @fingerprintjs/fingerprintjs-pro-svelte
  1. Wrap your application (or component) in FpjsProvider. You can specify multiple configuration options.
// App.svelte
<script>
  import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-svelte'
  import VisitorData from './VisitorData.svelte'

  const options = {
    loadOptions: {
      apiKey: '<fingerprintjs-pro-public-api-key>'
    },
  };
</script>

<FpjsProvider {options}>
  <VisitorData />
</FpjsProvider>
  1. Use the useVisitorData function in your Svelte components to perform visitor identification and get the data.
// VisitorData.svelte
<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>

<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>

Documentation

You can find the full API reference in the official GitHub repository. The repository also contains example apps demonstrating usage of the library.


Did this page help you?