React-ribbit-connect NPM

react-ribbit-connect

React component for integrating RIBBIT CONNECT into your webpage

Don't use react? Here are a few more implementation methods we provide: 1. Pure JavaScript 2. Angular (coming soon) 3. React Native (coming soon)

Install

With npm:

npm install --save react-ribbit-connect

With yarn:

yarn add react-ribbit-connect

Documentation

Please refer to the official RIBBIT CONNECT docs for more information.

Usage

import  {  RIBBITConnect  }  from  "react-ribbit-connect";

const App extends React.Component {
    // ...
    render() {
        return (
            <RIBBITConnect
            token={this.state.token} // see documentation on how to get a token
            settings={{
                curtainColor: 'rgba(0,0,0,0.5)',
            }}
            onComplete={this.onComplete}
            // onLaunch={...} // fired on ready
            // onMessage={...}
            // onExit={...}
            />
        );
    }
}

All Props

Name	Type	Default	Description
`token`	string		Token recieved from `/CONNECT/session/` endpoint
`open`	boolean	false	Whether or not CONNECT should be open or not
`language`	string	en	Optional language to be displayed to the user (Translation must be added within CONNECT settings. More coming soon.)
`style`	object		Optional styles to be applied to the CONNECT container
`className`	string		Optional class to be added to the CONNECT container
`inline`	boolean	false	Whether or not CONNECT should display inline (default is popup)
`fullscreen`	boolean	false	Whether or not CONNECT should display in full-screen mode (for native/mobile app implementation)
`settings`	object		Additional settings (see below)
`getContext`	function		Can be used to get the RIBBIT CONNECT context
`onMessage`	function		Generic message handler that fires for every one of the events below `function(eventName, eventData) => void`
`onLaunch`	function		`function(eventData) => void`
`onExit`	function		`function(eventData) => void`
`onComplete`	function		`function(eventData) => void`
`onBankLoginSelected`	function		`function(eventData) => void`
`onManualEnrollmentSelected`	function		`function(eventData) => void`
`onNoAccountsFound`	function		`function(eventData) => void`
`onBankNotFound`	function		`function(eventData) => void`
`onBankLogin`	function		`function(eventData) => void`
`onLinkOpen`	function		`function(eventData) => void`

Settings

Name	Type	Default	Description
`curtainColor`	string		Color of the popup background curtain. Examples: `#FFF` and `rgba(0,0,0,0.5)`
`curtainAllowClose`	boolean	true	Whether or not the user clicking on the popup background curtain should close the CONNECT popup
`closeButton`	boolean	false	Whether a close button should display in the top right corner of the widget. (on click fires the onExit method)