@bmunozg/react-image-area
v1.1.0TypeScript
React component to select multiple areas/regions of images.
4.3K/weekUpdated 3 years agoMITUnpacked: 42.6 KB
Published by Byron Muñoz G.
npm install @bmunozg/react-image-areareact-image-area
> React component to select multiple areas/regions of images.
:books: Table of Contents
- Installation
- Usage
- Features
- Docs
- Support
- Contributing
- License
:package: Installation
``bash`
npm i @bmunozg/react-image-area
:rocket: Usage
> Usage with types
`jsx
import { AreaSelector, IArea } from '@bmunozg/react-image-area'
const ExampleComponent = () => {
const [areas, setAreas] = useState
const onChangeHandler = (areas: IArea[]) => {
setAreas(areas);
}
return (
onChange={onChangeHandler}
>
)
}
`
:key: Features
- Responsive (you can use pixels or percentages).
- Touch enabled.
- Min/max area size.
- Custom area render
:notebook: Docs
- ### Required Props
- areas: IArea[]
Starting with no areas:
`jsx`
// ...
const [areas,setAreas] = useState
// ...
return (
>
)
// ...
- onChange: (areas: IArea[]) => void
A callback which happens for every change on the selection area.
`jsx`
// ...
const [areas,setAreas] = useState
// ...
return (
>
)
// ...
- ### 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
`js`
wrapperStyle={{
border: '2px solid black'
}}
- globalAreaStyle: CSSProperties
Apply global styles to the areas.
_Omited Styles_: position | touchAction | top | left | width |height
| boxSizing
`js`
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_
`jsx`
import { AreaSelector, IAreaRendererProps } from '@bmunozg/react-image-area'
// ...
const customRender = (areaProps: IAreaRendererProps) => {
if (!areaProps.isChanging) {
return (
{areaProps.areaNumber}
);
}
};
// ...
return (
customAreaRenderer={customRender}
>
);
// ...
- mediaWrapperClassName: string
Classname to apply to the media wrapper (image passed as children).
`jsx`
// ...
return (
);
// ...
_inside the component_ :arrow_down:
`jsx``
// ...
return (
wrapperStyle/}>
{/image passed as children/}
{/...Areas/}
)
//...
:hammer_and_wrench: Support
Please
open an issue for
support.
:memo: Contributing
Please contribute using
Github Flow. Create a branch,
add commits, and
open a pull request.