{"id":24015961,"url":"https://github.com/plaid/react-plaid-link","last_synced_at":"2025-05-15T14:08:50.002Z","repository":{"id":38424889,"uuid":"52313360","full_name":"plaid/react-plaid-link","owner":"plaid","description":"React bindings for Plaid Link","archived":false,"fork":false,"pushed_at":"2025-04-15T20:42:25.000Z","size":2687,"stargazers_count":276,"open_issues_count":41,"forks_count":153,"subscribers_count":53,"default_branch":"master","last_synced_at":"2025-04-27T18:48:32.824Z","etag":null,"topics":["plaid","plaid-link","react","react-component"],"latest_commit_sha":null,"homepage":"https://plaid.github.io/react-plaid-link","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plaid.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-22T23:16:54.000Z","updated_at":"2025-04-15T20:42:29.000Z","dependencies_parsed_at":"2024-06-13T05:43:22.692Z","dependency_job_id":"155fa071-5deb-4718-a34a-0fbb3a673dce","html_url":"https://github.com/plaid/react-plaid-link","commit_stats":{"total_commits":139,"total_committers":37,"mean_commits":"3.7567567567567566","dds":0.5971223021582734,"last_synced_commit":"319c81c413ef12624498aa1624c20151f19dc8ae"},"previous_names":["pbernasconi/react-plaid-link"],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plaid%2Freact-plaid-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plaid%2Freact-plaid-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plaid%2Freact-plaid-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plaid%2Freact-plaid-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plaid","download_url":"https://codeload.github.com/plaid/react-plaid-link/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plaid","plaid-link","react","react-component"],"created_at":"2025-01-08T08:23:17.442Z","updated_at":"2025-05-15T14:08:44.977Z","avatar_url":"https://github.com/plaid.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-plaid-link [![npm version](https://badge.fury.io/js/react-plaid-link.svg)](http://badge.fury.io/js/react-plaid-link)\n\n[React](https://facebook.github.io/react/) hook and components for integrating\nwith [Plaid Link](https://plaid.com/docs/link/)\n\n### Compatibility\n\nReact 16.8-18.x.x\n\nReact 19 is not officially supported due to the lack of official React 19 support by the project's dependency `react-script-hook`. \n\nHowever, if you need to use React 19, you can add the following to your `package.json`:\n\n```\n\"overrides\": {\n  \"react-plaid-link\": {\n    \"react\": \"$react\",\n    \"react-dom\": \"$react-dom\"\n  }\n}\n```\n\n### Install\n\nWith `npm`:\n\n```\nnpm install --save react-plaid-link\n```\n\nWith `yarn`\n\n```\nyarn add react-plaid-link\n```\n\n## Documentation\n\nPlease refer to the [official Plaid Link docs](https://plaid.com/docs/link/)\nfor a more holistic understanding of Plaid Link.\n\n## Examples\n\nHead to the `react-plaid-link`\n[storybook](https://plaid.github.io/react-plaid-link) to try out a live demo.\n\nSee the [examples folder](examples) for various complete source code examples.\n\n## Using React hooks\n\nThis is the preferred approach for integrating with Plaid Link in React.\n\n**Note:** `token` can be `null` initially and then set once you fetch or generate\na `link_token` asynchronously.\n\nℹ️ See a full source code examples of using hooks:\n\n- [examples/simple.tsx](examples/simple.tsx): minimal example of using hooks\n- [examples/hooks.tsx](examples/hooks.tsx): example using hooks with all\n  available callbacks\n- [examples/oauth.tsx](examples/oauth.tsx): example handling OAuth with hooks\n\n```tsx\nimport { usePlaidLink } from 'react-plaid-link';\n\n// ...\n\nconst { open, ready } = usePlaidLink({\n  token: '\u003cGENERATED_LINK_TOKEN\u003e',\n  onSuccess: (public_token, metadata) =\u003e {\n    // send public_token to server\n  },\n});\n\nreturn (\n  \u003cbutton onClick={() =\u003e open()} disabled={!ready}\u003e\n    Connect a bank account\n  \u003c/button\u003e\n);\n```\n\n### Available Link configuration options\n\nℹ️ See [src/types/index.ts][types] for exported types.\n\nPlease refer to the [official Plaid Link\ndocs](https://plaid.com/docs/link/web/) for a more holistic understanding of\nthe various Link options and the\n[`link_token`](https://plaid.com/docs/api/tokens/#linktokencreate).\n\n#### `usePlaidLink` arguments\n\n| key                   | type                                                                                      |\n| --------------------- | ----------------------------------------------------------------------------------------- |\n| `token`               | `string \\| null`                                                                          |\n| `onSuccess`           | `(public_token: string, metadata: PlaidLinkOnSuccessMetadata) =\u003e void`                    |\n| `onExit`              | `(error: null \\| PlaidLinkError, metadata: PlaidLinkOnExitMetadata) =\u003e void`              |\n| `onEvent`             | `(eventName: PlaidLinkStableEvent \\| string, metadata: PlaidLinkOnEventMetadata) =\u003e void` |\n| `onLoad`              | `() =\u003e void`                                                                              |\n| `receivedRedirectUri` | `string \\| null \\| undefined`                                                             |\n\n#### `usePlaidLink` return value\n\n| key      | type                                                            |\n|----------|-----------------------------------------------------------------|\n| `open`   | `() =\u003e void`                                                    |\n| `ready`  | `boolean`                                                       |\n| `submit` | `(data: PlaidHandlerSubmissionData) =\u003e void`                    |\n| `error`  | `ErrorEvent \\| null`                                            |\n| `exit`   | `(options?: { force: boolean }, callback?: () =\u003e void) =\u003e void` |\n\n### OAuth / opening Link without a button click\n\nHandling OAuth redirects requires opening Link without any user input (such as\nclicking a button). This can also be useful if you simply want Link to open\nimmediately when your page or component renders.\n\nℹ️ See full source code example at [examples/oauth.tsx](examples/oauth.tsx)\n\n```tsx\nimport { usePlaidLink } from 'react-plaid-link';\n\n// ...\n\nconst { open, ready } = usePlaidLink(config);\n\n// open Link immediately when ready\nReact.useEffect(() =\u003e {\n  if (ready) {\n    open();\n  }\n}, [ready, open]);\n\nreturn \u003c\u003e\u003c/\u003e;\n```\n\n## Using the pre-built component instead of the usePlaidLink hook\n\nIf you cannot use React hooks for legacy reasons such as incompatibility with\nclass components, you can use the `PlaidLink` component.\n\nℹ️ See full source code example at [examples/component.tsx](examples/component.tsx)\n\n```tsx\nimport { PlaidLink } from \"react-plaid-link\";\n\nconst App extends React.Component {\n  // ...\n  render() {\n    return (\n      \u003cPlaidLink\n        token={this.state.token}\n        onSuccess={this.onSuccess}\n        // onEvent={...}\n        // onExit={...}\n      \u003e\n        Link your bank account\n      \u003c/PlaidLink\u003e\n    );\n  }\n}\n```\n\n## Typescript support\n\nTypeScript definitions for `react-plaid-link` are built into the npm package.\nIf you have previously installed `@types/react-plaid-link` before this package\nhad types, please uninstall it in favor of built-in types.\n\n[types]: https://github.com/plaid/react-plaid-link/blob/master/src/types/index.ts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaid%2Freact-plaid-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplaid%2Freact-plaid-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaid%2Freact-plaid-link/lists"}