ZAC Apps Helium Component

A react component to manage and visualize the helium consumption of a set of NMR spectrometers. The productive use is showcased in a simple Next JS project (Source | Demo).

Requirements

The component can be used in any React App framework and was tested with Next JS.

Spectrometer configuration

To provide the compoonent with the required data, the React App has to contain a file /conf/heliumLookup.json. A sample spectrometer configuration can be found here.

You can easily setup and download your own spectrometer configuration using the ZAC Apps Helium Lookup Builder. Simply place the JSON file obtained from there in your project as described above.

Site environment variables

The component needs some variables about the site environment. These are read from /conf/site.json. A sample configuration file for this is provided here.

Installation

In your project, execute

npm install --save @zac-apps/helium

Then, import the component where you wish to use it:

import Helium from "@zac-apps/helium"

Usage

The component is simply called using

<Helium />;

The component needs to know the site base path. This can either be provided by the environment variables as described above or as a prop:

<Helium basePath={env.basePath} />

with env.basePath being a string or string variable containing the React project's hosted base path. That means, if the app is hosted at https://www.yourdomain.org/my-subfolder, the basePath variable must be set to /my-subfolder.