Sync Widget React SDK

The Sync Widget React SDK makes it easy to integrate Data Synchronization into your application, enabling users to effortlessly manage their data in the Portabl Passport™.

⚠️

This guide assumes that all prerequisite steps are applied and configured as mentioned in the Data Sync tutorial.

Installation

  npm install --save @portabl/react-sync-with-portabl

Usage

Render the Sync Widget component with the necessary properties.

import SyncWithPortabl from '@portabl/react-sync-with-portabl';
import axios from 'axios';
 
function App() {
  return (
    <SyncWithPortabl
      widgetBaseUrl="https://widgets.getportabl.com"
      getSyncContext={async () => {
        const { data } = await axios.get(`http://localhost:3001/sync-context`);
 
        return data;
      }}
      prepareSync={async () => {
        const { data } = await axios.post(`http://localhost:3001/prepare-sync`);
 
        return {
          invitationUrl: data.invitationUrl,
          isLinked: data.isLinked,
        };
      }}
    />
  );
}

Props

Option	Type	Default	Description
widgetBaseUrl	string	https://widgets.getportabl.com	The url from which to load the widget
getSyncContext	() => Promise<{ isSyncOn: boolean; isSessionEstablished: boolean; datapoints: string[]; issuerDIDs: string[]; }>		function that calls the Sync Context api endpoint and returns the response
prepareSync	() => Promise<{ isLinked: boolean; invitationUrl?: string; }>		function that calls the Prepare Sync api endpoint and returns the response

Javascript Javascript