https://github.com/giacomocerquone/opencv-react

Hooks-first minimal OpenCV wrapper for React
https://github.com/giacomocerquone/opencv-react

hacktoberfest opencv react react-hooks

Last synced: 7 days ago
JSON representation

Hooks-first minimal OpenCV wrapper for React

• Host: GitHub
• URL: https://github.com/giacomocerquone/opencv-react
• Owner: giacomocerquone
• License: mit
• Created: 2021-01-02T09:57:34.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-04-05T21:00:15.000Z (over 1 year ago)
• Last Synced: 2024-10-31T19:41:42.634Z (14 days ago)
• Topics: hacktoberfest, opencv, react, react-hooks
• Language: JavaScript
• Homepage: https://giacomocerquone.github.io/opencv-react/
• Size: 2.83 MB
• Stars: 48
• Watchers: 4
• Forks: 16
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# opencv-react

> Hooks-first minimal OpenCV wrapper for React.

[![NPM](https://img.shields.io/npm/v/opencv-react.svg)](https://www.npmjs.com/package/opencv-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)



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

```bash

npm i opencv-react

```

or

```bash

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](#description))

**Usage**:

```js

const MyApp = () => {

  return (

    

      

    

  )

}

```

## `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)

}

```

```js

function MyComponent() {

  const { loaded, cv } = useOpenCv()

  useEffect(() => {

    if (cv) {

    }

  }, [cv])

  return 
OpenCv React test

}

```


## Quick Start

```javascript

function MyComponent() {

  const data = useOpenCv()

  console.log(data)

  return 
OpenCv React test

}


const App = () => {

  const onLoaded = (cv) => {

    console.log('opencv loaded', cv)

  }

  return (

    

      

    

  )

}

```

_*Check also the example folder*_

## Todo

- tests

- prop types

- index.d.ts

## Projects that uses this lib

WIP

## License

MIT © [giacomocerquone](https://github.com/giacomocerquone)