react-annotation-tool
react-annotation-tool copied to clipboard
Unable to use ImageTool in separate react app
An exception is thrown when ImageTool is imported and placed in a custom container. Note that example code is used for testing. See snippet below.
` import {ImageTool} from "react-annotation-tool"
handleSubmit = r => {
console.log(r)
}
componentDidMount(){}
render(){
const menu = {id: "0", value: "root", options: [
{id: "1", value: "Object", options: [
{id: "1-1", value: "Face", options: []},
{id: "1-2", value: "Face Reflection", options: []},
{id: "1-3", value: "Framed Photo", options: []},
{id: "1-4", value: "Tattoo", options: []},
{id: "1-5", value: "Suspicious", options: []},
{id: "1-6", value: "Other", options: []},
]},
{id: "2", value: "Text", options: [
{id: "2-1", value: "Letter", options: []},
{id: "2-2", value: "Computer Screen", options: []},
{id: "2-3", value: "Pill Bottle/Box", options: []},
{id: "2-4", value: "Miscellaneous Papers", options: []},
{id: "2-5", value: "Menu", options: []},
{id: "2-6", value: "Credit Card", options: []},
{id: "2-7", value: "Business Card", options: []},
{id: "2-8", value: "Poster", options: []},
{id: "2-9", value: "Clothing", options: []},
{id: "2-10", value: "Book", options: []},
{id: "2-11", value: "Receipt", options: []},
{id: "2-12", value: "Street Sign", options: []},
{id: "2-13", value: "License Plate", options: []},
{id: "2-14", value: "Newspaper", options: []},
{id: "2-15", value: "Suspicious", options: []},
{id: "2-16", value: "Other", options: []},
]}
]},
url = "http://qnimate.com/wp-content/uploads/2014/03/images2.jpg";
return(
<div>
<div className="mb-5">
<ImageTool onNextClick={this.handleSubmit}
onPreviousClick={this.handleSubmit}
onSkipClick={this.handleSubmit}
annotationWidth={500}
menu={menu}
category={'Others'}
categoryOptions = {[]}
annotations = {[]}
disabledOptionLevels={[]}
dynamicOptions
labeled
url={url} />
</div>
</div>
);
}`