or

opencv-react

Hooks-first minimal OpenCV wrapper for React

Showing:

Popularity

Downloads/wk

70

GitHub Stars

11

Maintenance

Last Commit

9mos ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.6KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

opencv-react

Hooks-first minimal OpenCV wrapper for React.

NPM JavaScript Style Guide

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100