0.13.0 • Published 3 years ago
react-plaid v0.13.0
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>
}
}