Package Exports

react-plaid-link

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-plaid-link) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 = {
    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 = () => {
  const onSuccess = (token, metadata) => {
    // send token to server
  }
  render() {
    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;
  countryCodes?: Array<string>;
  language?: string;
  token?: string;
  userEmailAddress?: string;
  userLegalName?: string;
  webhook?: string;
  linkCustomizationName?: string;
  oauthNonce?: string;
  oauthRedirectUri?: string;
  oauthStateId?: string;
  paymentToken?: string;
}

Typescript support

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