@abartolo/react-plaid-link 中文文档教程

发布于 4年前 浏览 20 项目主页 更新于 3年前

react-plaid-link npm version

React 钩子和组件 与 Plaid Link drop module 集成

Install

使用 npm

npm install react-plaid-link --save

使用 yarn

yarn add -S react-plaid-link

Documentation

请参阅官方格子链接文档以了解 更全面地了解各种链接选项。

Examples

前往 react-plaid-link storybook 亲自尝试一下,或者 checkout:

Using React hooks

这是在 React 中与 Plaid Link 集成的新的首选方法。

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

请参阅官方格子链接文档以了解 更全面地了解各种链接选项和 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

react-plaid-link 的 Typescript 定义内置于 npm 包中。

react-plaid-link npm version

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.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文