# react-plaid

> React plaid link

Latest version **0.13.0** (published 2021-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-plaid
pnpm add react-plaid
yarn add react-plaid
bun add react-plaid
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.13.0 |
| Published | 2021-10-20 |
| First published | 2016-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 50.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Jason Brown |
| Maintainers | browniefed |
| Keywords | react, plaid |

## Links

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

## 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

- 0.13.0 (latest) — 2021-10-20
- 0.12.0 — 2021-10-20
- 0.11.0 — 2021-10-20
- 0.10.0 — 2019-06-21
- 0.9.0 — 2019-02-18
- 0.8.0 — 2018-11-16
- 0.7.0 — 2018-09-10
- 0.6.0 — 2018-08-30
- 0.5.0 — 2018-02-13
- 0.4.1 — 2018-02-13
- 0.4.0 — 2018-02-13
- 0.3.0 — 2018-02-13
- 0.2.2 — 2018-02-13
- 0.2.1 — 2018-02-13
- 0.2.0 — 2018-01-11
- … 2 more at https://npm.io/package/react-plaid/versions

## README

# React Plaid
React plaid component that has no DOM. Pass in the `open` prop to open.
Unforunately there is no close method on Plaid Link.

This plaid component depends on a global Plaid existing (from plaid-link script tag on the page). This may change in the future.

Be sure to handle changing `open` back to `false` with the `onExit` function otherwise you will not be able to re-open.


## Important

This requires you have `<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js">` on the page before your React executes.

### Example Renderings:
```
render() {
  <ReactPlaid open={this.state.open} onExit={() => this.setState({open: false})}>
    <div>
      Other things here.
    </div>
  </ReactPlaid>
}
```

or

```
render() {
  <div>
    Other DOM elements here.
    <ReactPlaid open={this.state.open} onExit={() => this.setState({open: false})} />
  </div>
}
```


### Full Example

```
import ReactPlaid, { DEV_ENV, PROD_ENV, CONNECT_PRODUCT } from "react-plaid";

class MyPlaidStuff extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: false,
      plaidData: [],
    }
  }
  render() {
    <div>
      <button onClick={() => this.setState({ open: true})}>Open Plaid</button>
      {
        this.state.plaidData.map(({ institution }) => <div>{institution.name} - {institution.type}</div>)
      }
      <ReactPlaid 
        clientName="Client Name"
        product={CONNECT_PRODUCT}
        apiKey="123"
        env={DEV_ENV}
        open={this.state.open} 
        onSuccess={(token, metaData) => this.setState({plaidData: metaData})}
        onExit={() => this.setState({open: false})} 
      />
    </div>
  }
}

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