https://github.com/plaid/react-plaid-link
React bindings for Plaid Link
https://github.com/plaid/react-plaid-link
plaid plaid-link react react-component
Last synced: about 1 year ago
JSON representation
React bindings for Plaid Link
- Host: GitHub
- URL: https://github.com/plaid/react-plaid-link
- Owner: plaid
- License: mit
- Created: 2016-02-22T23:16:54.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2025-04-15T20:42:25.000Z (about 1 year ago)
- Last Synced: 2025-04-27T18:48:32.824Z (about 1 year ago)
- Topics: plaid, plaid-link, react, react-component
- Language: TypeScript
- Homepage: https://plaid.github.io/react-plaid-link
- Size: 2.56 MB
- Stars: 276
- Watchers: 53
- Forks: 153
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-plaid-link [](http://badge.fury.io/js/react-plaid-link)
[React](https://facebook.github.io/react/) hook and components for integrating
with [Plaid Link](https://plaid.com/docs/link/)
### Compatibility
React 16.8-18.x.x
React 19 is not officially supported due to the lack of official React 19 support by the project's dependency `react-script-hook`.
However, if you need to use React 19, you can add the following to your `package.json`:
```
"overrides": {
"react-plaid-link": {
"react": "$react",
"react-dom": "$react-dom"
}
}
```
### Install
With `npm`:
```
npm install --save react-plaid-link
```
With `yarn`
```
yarn add react-plaid-link
```
## Documentation
Please refer to the [official Plaid Link docs](https://plaid.com/docs/link/)
for a more holistic understanding of Plaid Link.
## Examples
Head to the `react-plaid-link`
[storybook](https://plaid.github.io/react-plaid-link) to try out a live demo.
See the [examples folder](examples) for various complete source code examples.
## Using React hooks
This is the preferred approach for integrating with Plaid Link in React.
**Note:** `token` can be `null` initially and then set once you fetch or generate
a `link_token` asynchronously.
ℹ️ See a full source code examples of using hooks:
- [examples/simple.tsx](examples/simple.tsx): minimal example of using hooks
- [examples/hooks.tsx](examples/hooks.tsx): example using hooks with all
available callbacks
- [examples/oauth.tsx](examples/oauth.tsx): example handling OAuth with hooks
```tsx
import { usePlaidLink } from 'react-plaid-link';
// ...
const { open, ready } = usePlaidLink({
token: '',
onSuccess: (public_token, metadata) => {
// send public_token to server
},
});
return (
open()} disabled={!ready}>
Connect a bank account
);
```
### Available Link configuration options
ℹ️ See [src/types/index.ts][types] for exported types.
Please refer to the [official Plaid Link
docs](https://plaid.com/docs/link/web/) for a more holistic understanding of
the various Link options and the
[`link_token`](https://plaid.com/docs/api/tokens/#linktokencreate).
#### `usePlaidLink` arguments
| key | type |
| --------------------- | ----------------------------------------------------------------------------------------- |
| `token` | `string \| null` |
| `onSuccess` | `(public_token: string, metadata: PlaidLinkOnSuccessMetadata) => void` |
| `onExit` | `(error: null \| PlaidLinkError, metadata: PlaidLinkOnExitMetadata) => void` |
| `onEvent` | `(eventName: PlaidLinkStableEvent \| string, metadata: PlaidLinkOnEventMetadata) => void` |
| `onLoad` | `() => void` |
| `receivedRedirectUri` | `string \| null \| undefined` |
#### `usePlaidLink` return value
| key | type |
|----------|-----------------------------------------------------------------|
| `open` | `() => void` |
| `ready` | `boolean` |
| `submit` | `(data: PlaidHandlerSubmissionData) => void` |
| `error` | `ErrorEvent \| null` |
| `exit` | `(options?: { force: boolean }, callback?: () => void) => void` |
### OAuth / opening Link without a button click
Handling OAuth redirects requires opening Link without any user input (such as
clicking a button). This can also be useful if you simply want Link to open
immediately when your page or component renders.
ℹ️ See full source code example at [examples/oauth.tsx](examples/oauth.tsx)
```tsx
import { usePlaidLink } from 'react-plaid-link';
// ...
const { open, ready } = usePlaidLink(config);
// open Link immediately when ready
React.useEffect(() => {
if (ready) {
open();
}
}, [ready, open]);
return <>>;
```
## Using the pre-built component instead of the usePlaidLink hook
If you cannot use React hooks for legacy reasons such as incompatibility with
class components, you can use the `PlaidLink` component.
ℹ️ See full source code example at [examples/component.tsx](examples/component.tsx)
```tsx
import { PlaidLink } from "react-plaid-link";
const App extends React.Component {
// ...
render() {
return (
Link your bank account
);
}
}
```
## Typescript support
TypeScript definitions for `react-plaid-link` are built into the npm package.
If you have previously installed `@types/react-plaid-link` before this package
had types, please uninstall it in favor of built-in types.
[types]: https://github.com/plaid/react-plaid-link/blob/master/src/types/index.ts