Use the Universal Data Tool in React Applications.
Quick Start: CodeSandbox Example
Installation
npminstalluniversal-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";exportdefaultfunctionApp() {return ( <divclassName="App"> <UniversalSampleEditor// Read more about this format here:// https://github.com/UniversalDataTool/udt-formatinterface={{ 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 calledonModifySample={(sampleIndex, newSampleData) => {// do something }} /> </div> );}