React-shape-detect NPM

react-shape-detect (v0.2)

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

Install

$ npm i react-shape-detect

Usage

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() {
  return (
    <ShapeDetect 
      image={path} 
      onRender={func} 
      options={{ 
        type: 'face', 
        overlay: { 
          input: overlay
          options: {
            width: '70%'
          }
        }
      }} 
    />
  );
}

Basic Props

image

string | required

Path to image - network or local.

onRender

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

Callback is executed with the onLoad event of the <img/> 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

{
  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
      }
    }
  }
}