This package provides a react wrapper over Connect, a javascript plugin that allows your users to securely and seamlessly connect their utility accounts.

edmund-pelm

react-pelm-connect

    if (!css || typeof window === 'undefined') {

    const style = document.createElement('style');

    style.setAttribute('type', 'text/css');

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var useScript = _interopDefault(require('react-script-hook'));

/*! *****************************************************************************

Licensed under the Apache License, Version 2.0 (the "License"); you may not use

this file except in compliance with the License. You may obtain a copy of the

License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY

KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED

WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,

See the Apache Version 2.0 License for specific language governing permissions

***************************************************************************** */

function __awaiter(thisArg, _arguments, P, generator) {

    return new (P || (P = Promise))(function (resolve, reject) {

        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }

        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }

        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }

        step((generator = generator.apply(thisArg, _arguments || [])).next());

    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;

    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;

    function verb(n) { return function (v) { return step([n, v]); }; }

        if (f) throw new TypeError("Generator is already executing.");

            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;

            if (y = 0, t) op = [op[0] & 2, t.value];

                case 0: case 1: t = op; break;

                case 4: _.label++; return { value: op[1], done: false };

                case 5: _.label++; y = op[1]; op = [0]; continue;

                case 7: op = _.ops.pop(); _.trys.pop(); continue;

                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }

                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }

                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }

                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }

                    if (t[2]) _.ops.pop();

                    _.trys.pop(); continue;

        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }

        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };

    var _a = React.useState(), error = _a[0], setError = _a[1];

    var _b = useScript({ src: 'http://api.pelm.com/connect/pelm-connect.js', checkForExisting: true }), loading = _b[0], scriptError = _b[1];

    // const [loading, scriptError] = useScript({ src: 'https://pelm-staging.herokuapp.com/connect/pelm-connect.js', checkForExisting: true });

    // const [loading, scriptError] = useScript({ src: 'http://127.0.0.1:5000/connect/pelm-connect.js', checkForExisting: true });

    var _c = React.useState(null), pelmFactory = _c[0], setPelmFactory = _c[1];

        if (scriptError || !window.PelmConnect) {

            // eslint-disable-next-line no-console

            console.error('Error loading Pelm', scriptError);

            return __awaiter(this, void 0, void 0, function () {

                return __generator(this, function (_a) {

                            _a.trys.push([0, 2, , 3]);

                            return [4 /*yield*/, window.PelmConnect.create(config)];

                            next = _a.sent();

                            setPelmFactory(next);

                            return [3 /*break*/, 3];

    var _a = useConnect(props.config), open = _a.open, ready = _a.ready;

    return (React.createElement(React.Fragment, null,

        React.createElement("button", { type: "button", 

            onClick: function () { return open(); }, 

            // disabled={!ready || error}

            disabled: !ready }, props.children === undefined

  "description": "This package provides a react wrapper over Connect, a javascript plugin that allows your users to securely and seamlessly connect their utility accounts.",

    "url": "git+https://github.com/Pelm-Technologies/react-pelm-connect.git"

    "@types/styled-components": "^5.1.18",

    "rollup-plugin-typescript2": "^0.25.3",

    "url": "https://github.com/Pelm-Technologies/react-pelm-connect/issues"

  "homepage": "https://github.com/Pelm-Technologies/react-pelm-connect",

If you need to integrate Connect in a non-react web application, view these docs.

The first step is creating a Connect Token. This is an extra security measure that abstracts away information like your `client_id` and `user_id` from the client.

You can obtain a Connect Token by making the following request.

curl --request POST 'http://api.pelm.com/auth/connect-token' \

--header 'client_secret: YOUR_CLIENT_SECRET' \

More information on the Connect Token can be found in the docs [here](https://pelm.readme.io/reference/post_auth-connect-token).

The next step is creating a Config object to initialize Connect. 

The Config option takes in the following parameters.

- `connectToken`: the Connect Token created in the previous step

- `onSuccess`: this is the callback that is called when your User successfully connects their utility account. This callback should take an `authorizationCode: string` parameter, which you'll use to get an [`access_token`](https://pelm.readme.io/reference/post_auth-token-1).

- `onExit`: this is the callback that is called when Connect is exited but the user has not successfully connected their utility account. The callback will be called if the user manually exits Connect or if an error occurs causing Connect to close.

- `environment`: optional parameter to set the environment. Set this to use Connect in `sandbox` mode, which allows you to play around with Connect without using real data. If this is ommitted, then Connect will default to `prod` mode.

    onSuccess: (authorizationCode: string) => {...},

Implementation using [React Hooks](https://reactjs.org/docs/hooks-intro.html).

import { useConnect, Config } from 'pelm-connect';

        onSuccess: (authorizationCode: string) => {...},

    const { open, ready, error } = useConnect(config);

We also provide a styled button you can use.

import { ConnectButton, Config } from 'pelm-connect';

    return <ConnectButton config={config} />

		@@ -119,2 +119,3 @@
		};
		//# sourceMappingURL=useConnect.js.map

		@@ -121,0 +122,0 @@ var ConnectButton = function (props) {

		{
		"name": "react-pelm-connect",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "This package provides a react wrapper over Connect, a javascript plugin that allows your users to securely and seamlessly connect their utility accounts.",
		"author": "edmund",
		"author": "Pelm",
		"license": "Apache-2.0",
		@@ -7,0 +7,0 @@ "repository": {

		# Pelm Connect
		This package provides a react wrapper over Connect, a javascript plugin that allows your users to securely and seamlessly connect their utility accounts.

		If you need to integrate Connect in a non-react web application, view these docs.

		## Install
		```
		npm install pelm-connect
		npm install react-pelm-connect
		```
		@@ -46,3 +44,3 @@
		onExit: () => {},
		environment?: 'prod'
		environment: 'prod'
		}
		@@ -49,0 +47,0 @@ ```

Improved metrics

Worsened metrics