A React component to manage and visualize the helium consumption of a set of NMR spectrometers.
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).
The component can be used in any React App framework and was tested with Next JS.
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.
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.
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"
The component is simply called using
`
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:
`
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`.