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:

• Storybook
• /examples/hooks.js
• /examples/hoc.js

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 = {
    clientName: 'Your app name',
    env: 'sandbox',
    product: ['auth', 'transactions'],
    publicKey: '<YOUR_PLAID_PUBLIC_KEY>',
    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
      clientName="Your app name"
      env="sandbox"
      product={['auth', 'transactions']}
      publicKey="<YOUR_PLAID_PUBLIC_KEY>"
      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.

// src/types/index.ts
interface PlaidLinkOptions {
  clientName: string;
  env: string;
  publicKey: string;
  product: Array<string>;
  onSuccess: Function;
  // optional
  onExit?: Function;
  onLoad?: Function;
  onEvent?: Function;
  accountSubtypes?: { [key: string]: Array<string> };
  countryCodes?: Array<string>;
  language?: string;
  linkCustomizationName?: string;
  oauthNonce?: string;
  oauthRedirectUri?: string;
  oauthStateId?: string;
  paymentToken?: string;
  token?: string;
  userEmailAddress?: string;
  userLegalName?: string;
  webhook?: string;
}

Typescript support

Typescript definitions for react-plaid-link are built into the npm packge.