ginger-react-native

Device fingerprinting library using react native

Installation

Using npm:

npm install @ginger-ai/ginger-react-native

Using yarn:

yarn add @ginger-ai/ginger-react-native

Using pnpm:

pnpm add @ginger-ai/ginger-react-native

Usage

To get started, you need to be part of an organization, see the Joining an organization quick Start Guide. Join your organization and get a PUBLIC_APIKEY.

1. Wrap your application root component in GingerRNProvider

• Set apikey to your GINGER-AI Public API Key.

import { GingerRNProvider } from '@ginger-ai/ginger-react-native';

function App() {
  return (
    <GingerRNProvider
      config={{
        apikey: PUBLIC_API_KEY,
      }}
    >
      <YourApp />
    </GingerRNProvider>
  );
}

2. Initialize SDK once in a root component

The initialization function is the entrypoint into the SDK. You must initialize it at a root component so that you can use other hooks

import { useGinger } from '@ginger-ai/ginger-react-native';

function YourApp() {
  const { initialize, data, error, loading } = useGinger();

  useEffect(() => {
    const initializeGingerClient = async () => {
      try {
        await initialize();
      } catch (e) {
        console.error(e);
      }
    };
    initializeGingerClient();
  });
}

3. Track event using the useEvent hook

After a successful initialization process, you can track event in any child component

const { register, submitEvent, tracker } = useEvent({
  event_type: 'login',
  request_id: '',
  track_fields: [
    { id: 'password', ltm: true },
    { id: 'email', ltm: true },
  ],
});

Register the tracked fields in the component

// Basic registration
<TextInput {...register('email')} />

// With an additional custom handler
<TextInput
  {...register('email', {
    onChangeText: (text: any) => handleInputChange(text, 'email'),
  })}
  value={formFields.email}
/>

Use tracker to see the current values being tracked Use submitEvent to submit the tracked data

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.