react-image-area

react language license

React component to select multiple areas/regions of images.

Live Example

? Installation

npm i @bmunozg/react-image-area

? Usage

Usage with types

import { AreaSelector, IArea } from '@bmunozg/react-image-area'

const ExampleComponent = () => {
    const [areas, setAreas] = useState<IArea[]>([]);

    const onChangeHandler = (areas: IArea[]) => {
        setAreas(areas);
    }

    return (
        <AreaSelector
            areas={areas}
            onChange={onChangeHandler}
        >
            <img src='my-image.jpg' alt='my image'/>
        </AreaSelector>
    )
}

? Features

  • Responsive (you can use pixels or percentages).
  • Touch enabled.
  • Min/max area size.
  • Custom area render

? Docs

  • Required Props

    • areas: IArea[]

      Starting with no areas:

      // ...
const [areas,setAreas] = useState<IAreas[]>([])
// ...
return (
    <AreaSelector
        areas={areas}
    >
        <img src='my-image.jpg' alt='my image'/>
    </AreaSelector>
)
// ...

    • onChange: (areas: IAreas[]) => void

      A callback which happens for every change on the selection area.

      // ...
const [areas,setAreas] = useState<IAreas[]>()
// ...
return (
    <AreaSelector
        onChange={setAreas}
    >
        <img src='my-image.jpg' alt='my image'/>
    </AreaSelector>
)
// ...

  • Default Props

    • maxAreas: number

      Default: Infinity

      Set the maximum areas that can be drawn, by default there are no limit.

    • unit: 'pixel' | 'percentage'

      Default: pixel

      Set the unit you want to work with.

    • minWidth: number

      Default: 0

      Min width of the areas.

    • minHeight: number

      Default: 0

      Min height of the areas.

    • debug: boolean

      Default: false

      Display info of the current areas.

  • Optional Props

    • maxWidth: number

      Max width of the areas.

    • maxHeight: number

      Max height of the areas.

    • wrapperStyle: CSSProperties

      Apply styles to the wrapper element.

      Omited Styles: touchAction | boxSizing

      wrapperStyle={{
    border: '2px solid black'
}}

    • globalAreaStyle: CSSProperties

      Apply global styles to the areas.

      Omited Styles: position | touchAction | top | left | width | height | boxSizing

      globalAreaStyle={{
    border: '1.5px dashed blue',
    backgroundColor: 'lightblue',
    opacity: '0.5'
}}

    • customAreaRenderer: (areaProps: IAreaRendererProps) => ReactNode

      Custom render function to display info inside the areas. Remember to add a key

      import { AreaSelector, IAreaRendererProps } from '@bmunozg/react-image-area'
// ...
const customRender = (areaProps: IAreaRendererProps) => {
    if (!areaProps.isChanging) {
        return (
            <div key={areaProps.areaNumber}>
                {areaProps.areaNumber}
            </div>
        );
    }
};
// ...
return (
    <AreaSelector
        {/*...*/}
        customAreaRenderer={customRender}
    >
        <img src='my-image.jpg' />
    </AreaSelector>
);
// ...

    • mediaWrapperClassName: string

      Classname to apply to the media wrapper (image passed as children).

      // ...
return (
    <AreaSelector>
        <img src='my-image.jpg' />
    </AreaSelector>
);
// ...

      inside the component ⬇️

      // ...
return (
    <div {/*wrapperStyle*/}>
        <div className={mediaWrapperClassName}>
            {/*image passed as children*/}
        </div>
        {/*...Areas*/}
    </div>
)
//...

?️ Support

Please open an issue for support.

? Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

? License

MIT © ByronMunozG

GitHub

View Github