https://github.com/sam-parsons/react-shape-detect

shape detection api integration component
https://github.com/sam-parsons/react-shape-detect

react shape-detection-api

Last synced: 15 days ago
JSON representation

shape detection api integration component

• Host: GitHub
• URL: https://github.com/sam-parsons/react-shape-detect
• Owner: sam-parsons
• License: mit
• Created: 2021-01-03T05:12:20.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-06-01T01:27:21.000Z (almost 4 years ago)
• Last Synced: 2025-03-27T13:38:51.391Z (about 1 month ago)
• Topics: react, shape-detection-api
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-shape-detect
• Size: 440 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# react-shape-detect

![CI](https://github.com/sam-parsons/react-shape-detect/workflows/Node.js%20CI/badge.svg)

> A React component integration with the Shape Detection API. Provides coordinate data and overlay capabilites.

## Install

```

$ npm i react-shape-detect

```

## Usage

```js

import ShapeDetect from 'react-shape-detect';

const path = 'path-or-url-to-image';

const overlay = 'path-or-url-to-overlay';

const func = function(data) {

  console.log('objects detected: ', data);

}

export default function App() {

  const overlayOptions = { 

    input: overlay,

    options: {

      width: '70%'

    }

  };

  

  return (

    

  );

}

```

## Basic Props

### image

> `string` | _required_

Path to image

### onRender

> `function(data: any)` | defaults to: `(data) => void`

Callback is executed with the onLoad event of the `` tag. 


Returns coordinate data from matches on criteria defined in options object.

### options

> `object`

Detector type, custom Shape Detector API options, and HTML img tag attributes

```js

{

  type?: string // 'barcode', 'text' // default 'face'

  attributes?: React.CSSProperties,

  resizeDebounce?: number // default 250(ms)

  overlay?: {

    input: string || ReactComponent,

    options?: {

      width?: string, // auto height or set height independently

      height?: string,

      offset?: { // in pixels

        top?: number,

        left?: number

      }

    }

  }

}

```

## License

MIT