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.