@gamefi-org/id-react

The frontend SDK for GameFi.org ID built for React.

Installation

npm i @gamefi-org/id-react

Usage

@gamefi-org/id-react comes with a state-manager powered by zustand. In order to get started, we first need to bootstrap the SDK with configuration.

import { init } from '@gamefi-org/id-react';
init({
  recaptcha: 'Recaptcha client key',
  gsi: 'Google Sign-In client key',
  baseURL: 'GameFi.org ID API endpoint',
  rpcs: {
    // endpoints for web3 connectors
  },
});

From here, we can use the SDK with its components, hooks and utilities.

import { Toaster, useID } from '@gamefi-org/id-react';
import SignIn from '@gamefi-org/id-react/dist/SignIn';
import Profile from '@gamefi-org/id-react/dist/Profile';

// singleton service for toasting messages.
<Toaster
  toastOptions={{
    style: {
      minWidth: '350px',
      maxWidth: '70%',
    },
  }}
/>;

// rendering the Profile and SignIn modal.
const { user } = useID();
if (user) {
  return <Profile />;
}

return <SignIn />;

That's it.
For better understanding, we would recommend checking the Storybook and the Next.js example.