react-roi

React library to draw, move and resize rectangles.

Installation

npm i react-roi

Usage

Components:

import { RoiComponent } from 'react-roi';

function MyComponent() {
  return (
    <RoiComponent>
      <div style={{ width: '500px', height: '5S00px' }} />
    </RoiComponent>
  );
}

Images:

import { useContext, useEffect, useState } from 'react';
import { decode, Image } from 'image-js';
import { RoiComponent } from 'react-roi';
const [image, setImage] = useState(null);

useEffect(() => {
  const fetchImage = async (url) => {
    const response = await fetch(url.pathname);
    const buffer = await response.arrayBuffer();
    return decode(new Uint8Array(buffer));
  };
  fetchImage('your/url')
    .then((image) => setImage(image))
    .catch((error) => console.warn(error));
}, []);

function MyComponent() {
  return image ? (
    <RoiComponent image={image} options={{ width: 700, height: 500 }} />
  ) : null;
}

To access the state of the component, you need to render the RoiProvider at the top level of the required component. By doing so, any components wrapped within the RoiProvider will have access to the state provided by the context.

import { RoiProvider } from 'react-roi';

export default function App() {
  return (
    <RoiProvider>
      <MyComponent />
    </RoiProvider>
  );
}