{"id":13822030,"url":"https://github.com/mindee/react-mindee-js","last_synced_at":"2025-04-04T12:06:53.485Z","repository":{"id":41966645,"uuid":"281092158","full_name":"mindee/react-mindee-js","owner":"mindee","description":"Front-End Computer Vision SDK for React","archived":false,"fork":false,"pushed_at":"2025-01-16T13:26:00.000Z","size":38815,"stargazers_count":185,"open_issues_count":1,"forks_count":21,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-03-28T11:07:07.379Z","etag":null,"topics":["computer-vision","javascript","ocr","react","reactjs","sdk"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mindee.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-20T10:59:16.000Z","updated_at":"2025-02-28T16:07:42.000Z","dependencies_parsed_at":"2022-09-10T23:23:06.700Z","dependency_job_id":"c56162eb-79f2-4de7-b9f3-daf3ca360c51","html_url":"https://github.com/mindee/react-mindee-js","commit_stats":{"total_commits":47,"total_committers":4,"mean_commits":11.75,"dds":"0.23404255319148937","last_synced_commit":"dab996db0c0ecc1d4dc11b047c98d48c70e64ca1"},"previous_names":["publicmindee/react-mindee-js"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindee%2Freact-mindee-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindee%2Freact-mindee-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindee%2Freact-mindee-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindee%2Freact-mindee-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mindee","download_url":"https://codeload.github.com/mindee/react-mindee-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174407,"owners_count":20896076,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["computer-vision","javascript","ocr","react","reactjs","sdk"],"created_at":"2024-08-04T08:01:38.906Z","updated_at":"2025-04-04T12:06:53.464Z","avatar_url":"https://github.com/mindee.png","language":"TypeScript","readme":"# Check [React mindee documentation](https://react-mindee-js.netlify.app) for docs, guides, API and more!\n\n## Introduction\n\n#### **React mindee** is a very opinionated JavaScript library that will help you build interactive canvas for computer vision detection use cases.\n\nThere are many powerful JavaScript frameworks and tools that can help you make an interactive canvas. But almost all of them are _low-level_. Like [KONVA](https://konvajs.org/) is a 2d canvas framework. It is good, it is powerful. But you may need to write a lot of code.\n\nThis library was made for building frontend interfaces on top of **[Mindee](https://mindee.com/)** document parsing APIs and more generally on top of any computer vision detection APIs.\n\n[![NPM](https://img.shields.io/npm/v/react-mindee-js.svg)](https://www.npmjs.com/package/react-mindee-js/v/1.3.0) [![tests](https://github.com/mindee/react-mindee-js/actions/workflows/cypress-workflow.yml/badge.svg?branch=new-version)](https://github.com/mindee/react-mindee-js/actions/workflows/cypress-workflow.yml)\n\n![ezgif com-video-to-gif (12)](https://user-images.githubusercontent.com/41388086/87852820-92045b80-c905-11ea-808e-5a971de2b29f.gif)\n\n## Features\n\n- Support for image and PDF files\n- Interactive shapes with events binding\n- Extensible styling API\n- Controllable state props and modular architecture\n- Zoom in and out feature out of the box\n- Magnified/Zoomed view API\n\n## Compatibility\n\nThe React SDK is compatible with `React 16.8.0 +`\n\n## Installation and dependencies\n\nThe easiest way to use react-select is to install it from npm and build it into your app with Webpack.\n\n```bash\nnpm install --save react-mindee-js\n```\n\nor using yarn\n\n```\nyarn add react-mindee-js\n```\n\n## Usage\n\nYou only need an image and a list of shapes to get started.\n\n```jsx\nimport React from 'react'\nimport { AnnotationViewer } from 'react-mindee-js'\n\nimport dummyImage from 'path-to-your/file.jpg'\n\nconst dummyShapes = [\n  {\n    id: 1,\n    coordinates: [\n      [0.479, 0.172],\n      [0.611, 0.172],\n      [0.611, 0.196],\n      [0.479, 0.196],\n    ],\n  },\n  {\n    id: 2,\n    coordinates: [\n      [0.394, 0.068],\n      [0.477, 0.068],\n      [0.477, 0.087],\n      [0.394, 0.087],\n    ],\n  },\n]\n\nconst data = {\n  image: dummyImage,\n  shapes: dummyShapes,\n}\n\nfunction App() {\n  return \u003cAnnotationViewer data={data} /\u003e\n}\n```\n\n## Props\n\n- **`data`** : include 3 properties. `image` file to draw in the canvas, `shapes` which expect a list of shapes and`orientation` of the provided image (default: 0)\n- **`onShapeClick`** : return the shape object after a click event\n- **`onShapeMouseEnter`** : return the shape object after a mouse enter event\n- **`onShapeMouseLeave`** : return the shape object after a mouse leave event\n- **`onShapeMultiSelect`** : return the selected shapes using (CTRL + MOUSE CLICK \u0026 MOVE)\n- **`options`** : object of properties to customize default configs\n- **`id`** : unique id, if not provided it will be automatically generated\n- **`style`** : style object to change container css properties\n- **`className`** : apply a className to the control\n\n## Browser support\n\nReact mindee supports all recent browsers and works where React works. However, you may need check the [SSR](/docs/ssr) section.\n\n## Contribute to this repo\n\nFeel free to use github to submit issues, pull requests or general feedback.\nYou can also visit [our website](https://mindee.com) or drop us an [email](mailto:contact@mindee.com).\n\nPlease read our [Contributing section](https://github.com/publicMindee/react-mindee-js/blob/master/CONTRIBUTING.md) before contributing.\n\n## License\n\nMIT © [mindee](https://mindee.com)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindee%2Freact-mindee-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmindee%2Freact-mindee-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindee%2Freact-mindee-js/lists"}