@zerohash-sdk/profile-react

A React SDK that enables frontend React applications to seamlessly integrate with the Connect Profile product.

Connect Profile provides a secure, customizable flow for managing user profile information directly within your application.

Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher

Installation

npm install @zerohash-sdk/profile-react

Getting Started

Follow these simple steps to integrate Connect Profile into your React application:

1. Import the Profile Component

import { Profile } from '@zerohash-sdk/profile-react';

2. Add the Profile Component to Your App

function App() {
  const jwt = 'your-jwt-token'; // Obtain this from your backend

  return (
    <Profile
      jwt={jwt}
      env="prod" // or "cert" for testing
      theme="auto" // 'auto' (default), 'light', or 'dark'
    />
  );
}

3. Configure Event Callbacks (Optional)

Listen to events from the Profile SDK to handle user interactions:

function App() {
  const jwt = 'your-jwt-token';

  return (
    <Profile
      jwt={jwt}
      env="prod"
      theme="auto"
      onLoaded={() => console.log('Profile widget loaded and ready')}
      onClose={() => console.log('Profile widget closed')}
      onError={({ errorCode, reason }) => console.error('Error:', errorCode, reason)}
      onEvent={(event) => console.log('Event:', event)}
    />
  );
}

API Reference

Profile Component Props

| Prop | Type | Required | Default | Description | | ---------- | -------------------------------------- | -------- | -------- | ---------------------------------- | | jwt | string | Yes | - | JWT token for authentication | | env | "prod" \| "cert" \| "dev" \| "local" | No | "prod" | Target environment | | theme | "auto" \| "light" \| "dark" | No | "auto" | Theme mode for the interface | | onError | ({ errorCode, reason }) => void | No | - | Callback for error events | | onClose | () => void | No | - | Callback when the widget is closed | | onEvent | ({ type, data }) => void | No | - | Callback for general events | | onLoaded | () => void | No | - | Callback when the widget is loaded |

More Information & Support

For comprehensive documentation or support about Connect, visit our Documentation Page.