react-plaid-link - npm Package Compare versions

Comparing version 1.5.1 to 2.0.0

package.json

 {
   "name": "react-plaid-link",
-  "version": "1.5.1",
+  "version": "2.0.0",
   "description": "A React component for Plaid Link",
   "files": [
-    "dist/",
-    "lib/",
-    "src/",
+    "dist",
+    "src",
     "LICENSE"
   ],
-  "main": "./lib/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "jsnext:main": "dist/index.esm.js",
+  "browser:min": "dist/index.umd.min.js",
+  "browser": "dist/index.umd.js",
   "repository": {
@@ -16,2 +19,3 @@ "type": "git",
   },
+  "types": "dist/index.d.ts",
   "keywords": [
@@ -30,28 +34,59 @@ "react",
   },
+  "scripts": {
+    "storybook": "start-storybook -p 9001",
+    "deploy-storybook": "storybook-to-ghpages",
+    "build-storybook": "build-storybook -s public"
+  },
   "dependencies": {
-    "react-load-script": "0.0.6"
+    "prop-types": "^15.7.2",
+    "react-script-hook": "^1.0.15"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16",
-    "react-dom": "^0.14.0 || ^15.0.0 || ^16"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "babel-cli": "6.26.x",
-    "babel-core": "6.25.x",
-    "babel-eslint": "8.0.x",
-    "babel-loader": "7.1.x",
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.7.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-knobs": "^5.3.17",
+    "@storybook/addon-links": "^5.3.17",
+    "@storybook/addons": "^5.3.17",
+    "@storybook/preset-typescript": "^2.1.0",
+    "@storybook/react": "^5.3.17",
+    "@storybook/storybook-deployer": "^2.8.3",
+    "@types/enzyme": "^3.10.4",
+    "@types/react": "^16.9.19",
+    "@types/react-dom": "^16.9.5",
+    "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "@typescript-eslint/parser": "^2.24.0",
+    "@wessberg/rollup-plugin-ts": "^1.2.21",
+    "babel-loader": "^8.0.6",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-preset-es2015": "6.5.x",
-    "babel-preset-react": "6.5.x",
-    "babel-preset-stage-0": "6.5.x",
-    "babel-register": "6.5.x",
-    "enzyme": "1.5.x",
-    "eslint": "6.6.x",
-    "eslint-plugin-react": "5.2.x",
+    "eslint": "6.6.0",
+    "eslint-config-airbnb": "18.0.1",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jest": "^22.6.3",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^2.5.0",
     "mocha": "2.3.x",
-    "prop-types": "^15.5.10",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "prettier": "^1.19.1",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "react-tools": "0.13.x",
+    "rollup": "^1.27.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^5.1.2",
     "sinon": "1.17.x",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.8.3",
     "webpack": "^3.6.0",
@@ -61,5 +96,2 @@ "webpack-dev-server": "2.8.2",
   },
-  "scripts": {
-    "build": "babel -d dist/ src/"
-  },
   "tags": [
@@ -66,0 +98,0 @@ "react",

README.md

 # react-plaid-link [![npm version](https://badge.fury.io/js/react-plaid-link.svg)](http://badge.fury.io/js/react-plaid-link)
 
-A simple [React](https://facebook.github.io/react/) component for easy
-integration with the [Plaid Link drop-in module](https://blog.plaid.com/plaid-link/)
+[React](https://facebook.github.io/react/) hooks and components for
+integrating with the [Plaid Link drop module](https://blog.plaid.com/plaid-link/)
 
+### Install
 
-## Install
+With `npm`:
 
@@ -13,33 +14,82 @@ ```
 
-## Example Usage
+With `yarn`
 
+```
+yarn add -S react-plaid-link
+```
+
+## Documentation
+
+Please refer to the [official Plaid Link docs](https://plaid.com/docs/#creating-items-with-plaid-link) 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:
+
+- [`/examples/hooks.js`](./examples/hooks.js)
+- [`/examples/hoc.js`](./examples/hoc.js)
+
+### Using React hooks
+
+This is the new and preferred approach for integrating with Plaid Link in React.
+
 ```jsx
-import React, { Component } from 'react'
-import PlaidLink from 'react-plaid-link'
+import React, { useCallback } from 'react';
+import { usePlaidLink } from 'react-plaid-link';
 
-class App extends Component {
-  handleOnSuccess(token, metadata) {
-    // send token to client server
+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
+
+```jsx
+import React from 'react';
+import { PlaidLink } from 'react-plaid-link';
+
+const App = () => {
+  const onSuccess = (token, metadata) => {
+    // send token to server
   }
-  handleOnExit() {
-    // handle the case when your user exits Link
-  }
   render() {
     return (
       <PlaidLink
-        clientName="Your app name"
-        env="sandbox"
-        product={["auth", "transactions"]}
-        publicKey="PLAID_PUBLIC_KEY"
-        onExit={this.handleOnExit}
-        onSuccess={this.handleOnSuccess}>
-        Open Link and connect your bank!
+        clientName='Your app name'
+        env='sandbox'
+        product={['auth', 'transactions']}
+        publicKey='<YOUR_PLAID_PUBLIC_KEY>'
+        onSuccess={onSuccess}
+      >
+        Connect a bank account
       </PlaidLink>
-    )
+    );
   }
 }
-export default App
+export default App;
 ```
 
-## All Props
+#### All available Link configuration options
 
@@ -49,48 +99,30 @@ Please refer to the [official Plaid Link docs](https://plaid.com/docs/#creating-items-with-plaid-link) for
 
-```jsx
-<PlaidLink
-  clientName="Your app name"
-  env="sandbox"
-  key={PLAID_PUBLIC_KEY}
-  product={['auth', 'transactions']}
-  apiVersion={'v1' || 'v2'}
-  token={'public-token-123...'}
-  selectAccount={true} // deprecated – use https://dashboard.plaid.com/link
-  webhook="https://webhooks.test.com"
-  onEvent={this.handleOnEvent}
-  onExit={this.handleOnExit}
-  onLoad={this.handleOnLoad}
-  onSuccess={this.handleOnSuccess}
-  style={{width: '100px'}}
-  countryCodes={['US', 'CA']}
-  language="en"
-  user={{legalName: 'Jane Doe', emailAddress: '[e-mail]'}}
-  webhook="https://example.com/plaid-webhook"
-  oauthNonce={'627ddf99...'}
-  oauthRedirectUri="https://example.com/plaid-oauth-callback"
-  oauthStateId={'1b748f9e...'}
-  paymentToken={'payment-token-sandbox-1b748f9e...'}>
-  Open Link and connect a bank account to Plaid
-</PlaidLink>
+```ts
+// 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
 
-## Contributing
-
-Run tests:
-
-```
-make test
-```
-
-## Development
-
-```bash
-# install dependencies
-make setup
-
-# run a local server
-make start
-
-# open localhost:3000
-```
+Typescript definitions for `react-plaid-link` are built into the npm packge.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

118969

increased by21.54%

Number of package files

17

increased by88.89%

Lines of code

2840

increased by52.2%

Number of lines in readme file

127

increased by33.68%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

46

increased by119.05%

Number of low supply chain risk alerts

11

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.7.2

• + Addedreact-script-hook@^1.0.15

• + Addedreact-script-hook@1.7.2(transitive)

• - Removedreact-load-script@0.0.6

• - Removedreact-load-script@0.0.6(transitive)