A React component integration with the Shape Detection API. Provides coordinate data and overlay capabilites.
$ npm i react-shape-detect
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 (
<ShapeDetect
image={path}
onRender={func}
options={{ type: 'face', overlay: overlayOptions }}
/>
);
}
string| required
Path to image
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.
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
}
}
}
}MIT