Getting Started with React
Use the Universal Data Tool in React Applications.

Quick Start: CodeSandbox Example

Example Loading Image Classification Interface

Installation

1
npm install universal-data-tool
Copied!

Usage

The <UniversalDataViewer /> component has every interface baked in. Just provide a dataset in the dataset prop to view any dataset!
1
import React from "react";
2
import UniversalSampleEditor from "universal-data-tool";
3
4
export default function App() {
5
return (
6
<div className="App">
7
<UniversalSampleEditor
8
// Read more about this format here:
9
// https://github.com/UniversalDataTool/udt-format
10
interface={{
11
type: "image_classification",
12
labels: ["cat", "dog"]
13
}}
14
sample={{
15
imageUrl: "https://placekitten.com/408/287"
16
}}
17
onExit={(action: "go-to-prev" | "go-to-next" | undefined) => {
18
// Called when user hits "Save", "Next", or "Prev"
19
}}
20
// when data is saved this is called
21
onModifySample={(sampleIndex, newSampleData) => {
22
// do something
23
}}
24
/>
25
</div>
26
);
27
}
Copied!
Last modified 1yr ago