This repo demonstrates how to add Hopara visualizations to your React project. It's based on the Hopara React module.

• Node LTS v10 or greater.

1- Clone the project and install the node dependencies.

$ npm install

2- Configure the environment with the clientId and clientSecret provided by the Hopara support team.

$ export HOPARA_CLIENT_ID="your-hopara-client-id"
$ export HOPARA_CLIENT_SECRET="your-hopara-client-secret"

Alternatively, you can edit the .env file with your credential

REACT_APP_CLIENT_ID="your-hopara-client-id"
REACT_APP_CLIENT_SECRET="your-hopara-client-secret"

⚠️ In a production environment the access token request should take place on the back-end. This shared secret gives full control over your account.

3- Now you're ready to start the application:

$ npm start

You can further customize the integration by changing the @hopara/react component props.

<div className="HoparaEmbedded">
  <Hopara
    app="your-app-name"
    accessToken="your-access-token"
    dataLoaders={dataLoaders}
    dataUpdaters={dataUpdaters}
    controller={hoparaController}
  />
</div>

Additional information on this component is available at @hopara/react.