plaid / React Plaid Link
Licence: mit
React bindings for Plaid Link
Stars: ✭ 148
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to React Plaid Link
React Audio Recorder
A React Component using the Web Audio API to record, save, and play audio.
Stars: ✭ 118 (-20.27%)
Mutual labels: react-component
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+1225.68%)
Mutual labels: react-component
Kea
Production Ready State Management for React
Stars: ✭ 1,805 (+1119.59%)
Mutual labels: react-component
React Structured Data
React Structured Data provides an easy way to add structured data to your React apps
Stars: ✭ 120 (-18.92%)
Mutual labels: react-component
React Native Keyboard Accessory View
Keyboard accessory (sticky) view for your React Native app. Supports interactive dismiss on iOS.
Stars: ✭ 128 (-13.51%)
Mutual labels: react-component
Antd Schema Form
Based on Ant Design, interactive forms can be generated through JSON Schema configuration. - 基于Ant Design,可以通过JSON Schema配置生成可交互的表单。
Stars: ✭ 137 (-7.43%)
Mutual labels: react-component
React Auto Form
Simplifies getting user input from forms via onChange and onSubmit events, using DOM forms APIs
Stars: ✭ 116 (-21.62%)
Mutual labels: react-component
React Border Wrapper
A wrapper for placing elements along div borders.
Stars: ✭ 147 (-0.68%)
Mutual labels: react-component
React Share
Social media share buttons and share counts for React
Stars: ✭ 1,978 (+1236.49%)
Mutual labels: react-component
React Native Fading Slides
➰ Simple looped fading slides carousel for React Native.
Stars: ✭ 123 (-16.89%)
Mutual labels: react-component
React Splitters
React splitter component, written in TypeScript.
Stars: ✭ 127 (-14.19%)
Mutual labels: react-component
React Lazy
Universal lazy loader components using IntersectionObserver for React
Stars: ✭ 118 (-20.27%)
Mutual labels: react-component
React Spinners
A collection of loading spinner components for react
Stars: ✭ 2,054 (+1287.84%)
Mutual labels: react-component
React Router Active Component
Factory function for React components which are active for a particular React Router route
Stars: ✭ 116 (-21.62%)
Mutual labels: react-component
React Sizeme
Make your React Components aware of their width and height!
Stars: ✭ 1,770 (+1095.95%)
Mutual labels: react-component
React Page Progress
🎉 Sweet Component powered by React Hooks 🚀 👉
Stars: ✭ 148 (+0%)
Mutual labels: react-component
React User Tour
Give your user a guided tour around your application
Stars: ✭ 146 (-1.35%)
Mutual labels: react-component
Create React Component Folder
Creates react component folder structure
Stars: ✭ 139 (-6.08%)
Mutual labels: react-component
react-plaid-link
React hooks and components for integrating with the Plaid Link drop module
Install
With npm
:
npm install react-plaid-link --save
With yarn
yarn add -S react-plaid-link
Documentation
Please refer to the official Plaid Link docs for a more holistic understanding of the various Link options.
Examples
Head to the react-plaid-link
storybook to try it out for yourself, or
checkout:
Using React hooks
This is the new and preferred approach for integrating with Plaid Link in React.
import React, { useCallback } from 'react';
import { usePlaidLink } from 'react-plaid-link';
const App = () => {
const onSuccess = useCallback((token, metadata) => {
// send token to server
}, []);
const config = {
token: '<GENERATED_LINK_TOKEN>',
onSuccess,
// ...
};
const { open, ready, error } = usePlaidLink(config);
return (
<MyButton onClick={() => open()} disabled={!ready}>
Connect a bank account
</MyButton>
);
};
export default App;
Using a React component
import React from 'react';
import { PlaidLink } from 'react-plaid-link';
const App = props => {
const onSuccess = (token, metadata) => {
// send token to server
};
return (
<PlaidLink
token="<GENERATED_LINK_TOKEN>"
onSuccess={onSuccess}
{...}
>
Connect a bank account
</PlaidLink>
);
};
export default App;
All available Link configuration options
Please refer to the official Plaid Link docs for a more holistic understanding of the various Link options and the link_token.
// src/types/index.ts
interface PlaidLinkOptionsWithLinkToken = {
token: string;
onSuccess: Function;
onExit?: Function;
onLoad?: Function;
onEvent?: Function;
receivedRedirectUri?: string;
}
type PlaidLinkOptions = PlaidLinkOptionsWithLinkToken;
Typescript support
Typescript definitions for react-plaid-link
are built into the npm packge.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].