QuickStart: React Integration

Make sure you take a look at the Web Guide, Start a user session, and Retrieve User Access Token in order to learn the steps that need to be taken to set up Human API Connect.

Example usage

Here is a simple example of a React app for Connect:

import React from 'react';
import './App.css';
const { HumanConnect } = window;

HumanConnect.on("close", (response) => {console.log("Connect closed", response)});
HumanConnect.on("connect", (response) => {console.log("Source connected", response)});
HumanConnect.on("disconnect", (response) => {console.log("Source disconnected", response)});

function App() {
  return (
    <div className="App">
      <header className="App-header hapi__token-container">
        <button
          className="square"
          data-hapi-token="<your session token>" 
          >
        Connect your health data
        </button>
      </header>
    </div>
  );
}

export default App;

If installing from npm, it might look like the above, but instead of:

const { HumanConnect } = window;

you would use:

import * from "humanapi-connect-client";

React Component example

If you prefer to build a Connect component, you can see the following example.

Notice the use of <p className="has-text-centered hapi__token-container"> where the hapi__token-container class allows the Connect Client to find the data-hapi-token attribute in elements that are children of this container class. The Connect Client will look for these attributes, even if the page isn't server-side rendered, or if the token is set after mounting the component.

You may also specify optional attributes data-hapi-mode, data-hapi-segment, and data-hapi-pinned-providers, for more information, take a look at Customize your Connect Integration .

import PropTypes from "prop-types";
import React from "react";
import "../styles/login.scss";

class ConnectView extends React.Component {
    constructor(props) {
        super(props);
        const { token } = props;
        this.state = { connectClosed: false, token };
      
        if ( props.connectionCallback ) {
            this.connectionCallback = props.connectionCallback; 
        }
        if ( props.disconnectCallback ) {
            this.disconnectCallback = props.disconnectCallback; 
        }
        if ( props.closeCallback ) {
            this.closeCallback = props.closeCallback; 
        }
    }

    componentDidMount() {
        const { HumanConnect } = window;

        if (HumanConnect) {
            HumanConnect.on("close", results => {
                console.log({ results });
                this.setState({ connectClosed: true });
                if ( this.closeCallback ) {
                    this.closeCallback( response );
                }
            });
            HumanConnect.on('connect', response => {
                if ( this.connectionCallback ) {
                    this.connectionCallback( response );
                }
            });
            HumanConnect.on('disconnect', response => {
                if ( this.disconnectCallback ) {
                    this.disconnectCallback( response );
                }
            });
        }
    }

    renderConnect() {
        const { token } = this.state;

        return (
            <div>
                <h3 className="title is-3">Connect your Health Data</h3>
                <p className="has-text-centered hapi__token-container">
                    <button className="button is-link"
                        data-hapi-token={token}
                        data-hapi-mode="auth"
                        data-hapi-segment="<optional alphanumeric identifier>"
                        data-hapi-pinned-providers="<optional comma-separated provider IDs>"
                    >
                        Continue
                    </button>
                </p>
            </div>
        );
    }

    renderClientUserId() {
        return (
            <div>
                <h3 className="title is-3">
                    Thank you for connecting your Health Data.
                </h3>
            </div>
        );
    }

    render() {
        const { connectClosed } = this.state;
        const content = connectClosed
            ? this.renderClientUserId()
            : this.renderConnect();

        return (
            <div>
                <nav
                    className="navbar is-fixed-top is-warning"
                    role="navigation"
                    aria-label="main navigation"
                >
                    <div className="navbar-menu">
                        <div className="navbar-start">
                            <a href="/connect" className="navbar-item">
                                Connect
                            </a>
                        </div>
                    </div>
                </nav>
                <div className="container is-fullhd main-container">
                    <div className="box connect-container">{content}</div>
                </div>
            </div>
        );
    }
}

ConnectView.propTypes = {
    token: PropTypes.string.isRequired
};

module.exports = ConnectView;

Troubleshooting

In the event where you have issues with launching Connect, it may be helpful to manually trigger a window load event. We listen to this event (amongst other DOM changes) in order to know when the page is ready for Connect to be bound to your element.

If you find you aren't able to get connect to launch when clicking on your button, and you are sure your session token is valid, try adding the following code:

var event = document.createEvent('Event');
event.initEvent('load', true, true);
window.dispatchEvent(event);

This code should be added after you have fetched and added the token to the DOM. In this example, it would be best to add to the bottom of componentDidMount.