React

Installation

To use Rollee Connect with React, you must create a React project first:

npx create-react-app your-rollee-connect-app

Afterwards, you need to install the Rollee Connect SDK library in your project.

$ npm i @getrollee/connect-react-sdk

Usage

Now, you must import the Rollee Connect component and place it in your App's code.
The Rollee Connect component is a View that you can integrate into your App's flow, and the CONFIG and optional callback handlers are passed in as props.

import { RolleeView } from '@getrollee/connect-react-sdk';
.
.
.
<RolleeView config={CONFIG} onCompleted={onCompleted} />;

Callbacks

When you want to exit from Rollee Connect back to your application or to get information when user completed flow, you should use onCompleted callback

function onClose() {
  console.log('onClose');
}

function onCompleted(data) {
  console.log('onCompleted', data);
}

Configuration

To define a User Session on Rollee Connect, you must provide the mandatory parameters token and sessionToken .

The setup parameters are optional.

▫️ The minimal configuration for setting up Rollee Connect component:

const CONFIG = {
  token: '<your-jwt-token>',
  sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
};

▫️ The optional configuration for setting up Rollee Connect component:

const CONFIG = {
  token: '<your-jwt-token>',
  sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  setup: {
    production: false,
    introScreenSkip: false,
    introScreenTitle: 'Lets link your work accounts',
    ctaTextColor: 'white',
    ctaBackgroundColor: 'black',
    partnerLogoUrl: 'https://somedomain.com/your_logo.png',
    datasource: '<datasource-uuid>'
  },
};

// If you wish not to customize one of the parameters present in `setup`, you can just delete them and the SDK will use the respective default value.

Running the SDK in the Production environment

By default, Rollee Connect runs in the Sandbox environment, meant for testing.
To be able to test SDK in the Production environment, you should provide a setup parameter named production and set it to true.

const CONFIG = {
  token: '<your-jwt-token>',
  sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  setup: {
    production: true
    }
};

Setup Parameters Descriptions

Bellow you have the description of all the parameters present in the Setup.
If you wish not to customise one of the parameters present in setup, you can just delete them and the SDK will use the respective default value.

Param	Description
sessionToken	`String` - defining user session on Rollee Connect application
production	`Boolean` - parameter for switching between sandbox and production env
introScreenSkip	`Boolean` - with this parameter set as true you can skip the first screen and load directly a Terms screen
introScreenTitle	`String` - Change intro screen title sentence
ctaTextColor	`String` - Changing CTA button “Get started” text color
ctaBackgroundColor	`String` - Changing CTA button “Get started” background color
partnerLogoUrl	`String` - Change header logo image with proper URL of image
datasource	`String` - add data source ID provided by Rollee

Example file

In order to quickstart your Rollee Connect experience with React, you can simply replace your App.js file with the following file. Please update the token and sessionToken values accordingly.

import './App.css';
import { RolleeView } from '@getrollee/connect-react-sdk';

const CONFIG = {
  token: '<your-jwt-token>',
  sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  setup: {
    production: false,
    introScreenSkip: false,
    introScreenTitle: 'Lets link your work accounts',
    ctaTextColor: 'white',
    ctaBackgroundColor: 'black',
    partnerLogoUrl: 'https://somedomain.com/your_logo.png',
    datasource: '<datasource-uuid>'
  },
};

function onCompleted(data) {
  console.log('onCompleted', data);
}

function onClose() {
  console.log('onClose');
}

function App() {
  return (
    <div className="App">
      <RolleeView config={CONFIG} onCompleted={onCompleted} onClose={onClose} />;
    </div>
  );
}

export default App;