Gathering detailed insights and metrics for react-plaid-link
Gathering detailed insights and metrics for react-plaid-link
Gathering detailed insights and metrics for react-plaid-link
Gathering detailed insights and metrics for react-plaid-link
npm install react-plaid-link
Typescript
Module System
Node Version
NPM Version
92.6
Supply Chain
94.3
Quality
88.8
Maintenance
100
Vulnerability
100
License
TypeScript (76.16%)
JavaScript (19.11%)
Makefile (3.63%)
Shell (1.11%)
Total Downloads
39,952,957
Last Day
7,252
Last Week
295,698
Last Month
1,196,614
Last Year
12,954,339
MIT License
283 Stars
172 Commits
156 Forks
49 Watchers
48 Branches
208 Contributors
Updated on Aug 29, 2025
Latest Version
4.1.1
Package Id
react-plaid-link@4.1.1
Unpacked Size
131.38 kB
Size
21.31 kB
File Count
22
NPM Version
10.8.2
Node Version
20.19.0
Published on
Aug 06, 2025
Cumulative downloads
Total Downloads
Last Day
8.9%
7,252
Compared to previous day
Last Week
4.8%
295,698
Compared to previous week
Last Month
-6.2%
1,196,614
Compared to previous month
Last Year
44.4%
12,954,339
Compared to previous year
1
51
React hook and components for integrating with Plaid Link
React 16.8-19.x.x
With npm
:
npm install --save react-plaid-link
With yarn
yarn add react-plaid-link
Please refer to the official Plaid Link docs for a more holistic understanding of Plaid Link.
Head to the react-plaid-link
storybook to try out a live demo.
See the examples folder for various complete source code examples.
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:
1import { usePlaidLink } from 'react-plaid-link'; 2 3// ... 4 5const { open, ready } = usePlaidLink({ 6 token: '<GENERATED_LINK_TOKEN>', 7 onSuccess: (public_token, metadata) => { 8 // send public_token to server 9 }, 10}); 11 12return ( 13 <button onClick={() => open()} disabled={!ready}> 14 Connect a bank account 15 </button> 16);
ℹ️ See src/types/index.ts for exported types.
Please refer to the official Plaid Link
docs for a more holistic understanding of
the various Link options and the
link_token
.
usePlaidLink
argumentskey | 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 valuekey | type |
---|---|
open | () => void |
ready | boolean |
submit | (data: PlaidHandlerSubmissionData) => void |
error | ErrorEvent | null |
exit | (options?: { force: boolean }, callback?: () => void) => void |
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
1import { usePlaidLink } from 'react-plaid-link'; 2 3// ... 4 5const { open, ready } = usePlaidLink(config); 6 7// open Link immediately when ready 8React.useEffect(() => { 9 if (ready) { 10 open(); 11 } 12}, [ready, open]); 13 14return <></>;
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
1import { PlaidLink } from "react-plaid-link"; 2 3const App extends React.Component { 4 // ... 5 render() { 6 return ( 7 <PlaidLink 8 token={this.state.token} 9 onSuccess={this.onSuccess} 10 // onEvent={...} 11 // onExit={...} 12 > 13 Link your bank account 14 </PlaidLink> 15 ); 16 } 17}
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.
No vulnerabilities found.