Getting Started with React

Search…

Use the Universal Data Tool in React Applications.

Quick Start: CodeSandbox Example
Example Loading Image Classification Interface
Installation
npm install universal-data-tool
Usage
The <UniversalDataViewer /> component has every interface baked in. Just provide a dataset in the dataset prop to view any dataset!
import React from "react";
import UniversalSampleEditor from "universal-data-tool";
​
export default function App() {
  return (
    <div className="App">
      <UniversalSampleEditor
        // Read more about this format here:
        // https://github.com/UniversalDataTool/udt-format
        interface={{
          type: "image_classification",
          labels: ["cat", "dog"]
        }}
        sample={{
          imageUrl: "https://placekitten.com/408/287"
        }}
        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
        }}
      />
    </div>
  );
}

Integrate with Any Web Page - Previous

Integrate with the Javascript Library

Next - Train your Workforce

Getting Started with UDT Courses

Last modified 1yr ago

Copy link

On this page

Quick Start: CodeSandbox Example

Installation

Usage