# react-ribbit-connect

> React implementation for RIBBIT CONNECT

Latest version **1.0.22** (published 2022-12-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-ribbit-connect
pnpm add react-ribbit-connect
yarn add react-ribbit-connect
bun add react-ribbit-connect
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.22 |
| Published | 2022-12-01 |
| First published | 2022-10-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 14.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Darryl Huffman |
| Maintainers | darrylhuffman |
| Keywords | ribbit, ribbit, connect, react |

## Links

- npm: https://www.npmjs.com/package/react-ribbit-connect
- Repository: https://github.com/RIBBITai/react-ribbit-connect
- Homepage: https://github.com/RIBBITai/react-ribbit-connect#readme
- Issues: https://github.com/RIBBITai/react-ribbit-connect/issues
- npm.io page: https://npm.io/package/react-ribbit-connect

## Dependencies (3)

- [core-js](https://npm.io/package/core-js.md) ^3.26.1
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [ribbit-connect-meta](https://npm.io/package/ribbit-connect-meta.md) ^1.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.22 (latest) — 2022-12-01
- 1.0.21 — 2022-12-01
- 1.0.20 — 2022-12-01
- 1.0.19 — 2022-11-30
- 1.0.18 — 2022-11-30
- 1.0.17 — 2022-11-30
- 1.0.16 — 2022-11-30
- 1.0.15 — 2022-11-30
- 1.0.14 — 2022-11-30
- 1.0.13 — 2022-11-30
- 1.0.12 — 2022-11-30
- 1.0.11 — 2022-11-30
- 1.0.10 — 2022-11-30
- 1.0.9 — 2022-11-30
- 1.0.8 — 2022-11-30
- … 8 more at https://npm.io/package/react-ribbit-connect/versions

## README

# react-ribbit-connect
React component for integrating [RIBBIT CONNECT](https://test.RIBBIT.ai/CONNECT) into your webpage

Don't use react? Here are a few more implementation methods we provide:
1.  [Pure JavaScript](https://github.com/darrylhuffman/ribbit-connect)
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](https://portal.ribbit.ai/Widgets/Integration) docs for more information.

## Usage
```jsx
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)

---
_Source: https://npm.io/package/react-ribbit-connect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._