Skip to content

Latest commit

 

History

History
88 lines (70 loc) · 3.19 KB

README.md

File metadata and controls

88 lines (70 loc) · 3.19 KB

yodlee-react-hook

Yodlee FastLink 3.0 React hook.

This tiny library helps you to use Yodlee FastLink v3.0 in your React projects.

Installation

# with npm
npm install yodlee-react-hook
# with yarn
yarn add yodlee-react-hook

Usage

Generate accessToken or jwtToken with your clientId, secret and userName on your backend and pass it down to your client below to open iframe.

import { useYodlee } from 'yodlee-react-hook';

const MyComponent = () => {
  const { ready, init } = useYodlee({
    containerId: 'container-fastlink',
    fastLinkOptions: {
      fastLinkURL: 'https://node.sandbox.yodlee.com/authenticate/restserver',
      token: {
        tokenType: 'AccessToken',
        tokenValue: 'foo'
      }
    }
  });

  return (
    <div className="container">
      <div id="container-fastlink"></div>
      { ready ? <button onClick={() => init()}>Open Yodlee</button> : 'Loading...' }
    </div>
  );
}

Test

# with npm
npm run test
# with yarn
yarn test

Details

useYodlee hook arguments:

  • containerId (string): Id for DOM Element to load iframe into.
  • createScriptTag (boolean, default = true): If you set this to false then hook will not add script element to component. It's suitable for react apps having script element already added to the page e.g. <script defer async src="https://cdn.yodlee.com/fastlink/v3/initialize.js"></script>. If you receive cross-origin error from React then this would be the preferred solution for you.
  • fastLinkOptions (FastLinkOptionsType)
  • onSuccess, onError, onExit, onEvent: Additional callback functions if you would like to add customer implementation.

Please consult to Yodlee fastlink.open() instructions for details.

useYodlee hook return values:

  • init (method): Method to initiate FastLink which creates an iframe
  • ready (boolean): Yodlee FastLink library is loaded or not
  • active (boolean): Init method called or not
  • data (any): Customer data received from onSuccess event
  • error (any): This is the error if Yodlee FastLink intercepts with any error

You can find typescript definitions in index.d.ts file.