Usage with React

First, install the universal-data-tool to your react project.

npm install universal-data-tool

Now import the UniversalDataViewer component...

import React from "react"
import UniversalDataViewer from "universal-data-tool/components/UniversalDataViewer"

export default () => (
  <UniversalDataViewer
    hideHeader // optional default: false (show header)

    // oha is where you put your UDT formatted object
    // Read more about this format here:
    // https://github.com./UniversalDataTool/udt-format
    dataset={{
      interface: { type: "..." },
      samples: [/* ... */],
      // ...
    }}

    onExit={(action: "go-to-prev" | "go-to-next" | undefined ) => {
       // Called when user hits "Save", "Next", or "Prev"
    }}

    // when data is saved this is called
    onModifySample={(sampleIndex, newSampleData) => {
      // do something
    }}
  />
)