react-image-area

React component to select multiple areas/regions of images.

Live Example

📚 Table of Contents

• Installation
• Usage
• Features
• Docs
• Support
• Contributing
• License

📦 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<IArea[]>([])
    // ...
    return (
        <AreaSelector
            areas={areas}
        >
            <img src='my-image.jpg' alt='my image'/>
        </AreaSelector>
    )
    // ...

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

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

    // ...
    const [areas,setAreas] = useState<IArea[]>()
    // ...
    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