opencv-react

Hooks-first minimal OpenCV wrapper for React.

It simplifies the import of this library and integrates it well with the React ecosystem. Bear in mind that the loading of the library, being huge, is done asynchronously. Of course you can listen with this lib when the loading has finished in order to execute some setup code. You have also access to a loaded state which is provided by the OpenCvProvider component

Install

npm i opencv-react

or

yarn add opencv-react

API

OpenCvProvider

Props

• openCvPath: string used to indicate where to load the OpenCv lib from (default to official cdn)
• onLoad: function that gets called whenever the library has finished loading (see the package description)

Usage:

const MyApp = () => {
  return (
    <OpenCvProvider>
      <MyComponent />
    </OpenCvProvider>
  )
}

useOpenCv

Context object

{
  loaded: boolean, indicates if the opencv library is loaded (useful to show a spinner)
  cv: undefined or the OpenCV global instance (can also be found in window.cv)
}

function MyComponent() {
  const { loaded, cv } = useOpenCv()

  useEffect(() => {
    if (cv) {
    }
  }, [cv])

  return <p>OpenCv React test</p>
}

Quick Start

function MyComponent() {
  const data = useOpenCv()
  console.log(data)
  return <p>OpenCv React test</p>
}

const App = () => {
  const onLoaded = (cv) => {
    console.log('opencv loaded', cv)
  }

  return (
    <OpenCvProvider onLoad={onLoaded} openCvPath='/opencv/opencv.js'>
      <MyComponent />
    </OpenCvProvider>
  )
}

Check also the example folder

Todo

• tests
• prop types
• index.d.ts

Projects that uses this lib

WIP

License

MIT © giacomocerquone