react-imgbox

React component that draws a styled box over an image; react version of jquery-imgbox.

Project parts

This repo contains 2 projects:

1. imgbox - NPM module
2. NextJs - Demo application

Build and run locally

cd imgbox
yarn install
yarn run build
yarn link
cd ../next-app
yarn install
yarn link react-imgbox
yarn run dev

Then goto [http://localhost:3000/]

Overview

ImgBox uses coordinates bases on the real size of the src image to draw a box over the same area no matter the size of the picture. There is an edit option for you to draw the box yourself and save the coordinates for latter.

See the demo page for examples.

This plugin can be used as a drop in replacement for <img> tag and will behave similarly.

Dependencies

1. ReactJs 18

Size

After gzip compression react-imgbox.babel.min.js is 3.2K.

Usage

Passing props

What I think is a default may not be a default for others so props may be passed as props or as part of a props.defaultSettings.

<ImgBox src="/img/pic.jpg" x="20" y="30" w="50" h="75"
    defaultSettings={{
    debug: true,
    name: 'my pic',
    markStyle: {
        border: '10px outset white'
    }
    }}
/>

is equivlient to

<ImgBox debug={true} name="my pic" markStyle={{border: '10px outset white'}}
    defaultSettings={{
        src: "/img/pic.jpg",
        x: 20,
        y: 30,
        w: 50,
        h: 75
    }}
/>

Coordinate system

The coordinate numbers are pixels across the original image. Coordinate may be passed in 2 forms:

1. x,y with width (w) and height (h)
2. x,y with x2, y2
3. If you include w,h,x2,y2 they should be internally consistant as x2,y2 will take priority. x and y are effectiviely left and top and the other 2 forms are positive numbers.

Modes

If edit is false, then the component is read-only and the marker may only be changed via props. If edit is true, then click to start drawing and click again to stop drawing. saveBox will be called and passed an object containing x, y, x2, y2, w and h. After editing has finished the marker will return to the props position. So if you want the changes to be permanant you must update the props to reflect the new state.

const [coords, setCoords] = useState({{x: 10, y: 10, x2: 20, y2: 20}})

return <ImgBox x={coords.x} .... edit={true} saveBox={(newCoords) => setCoords(newCoords)}>

Options

Here's the list of available settings.

Settings

To be used in IMG tags.

Attribute | Type | Default | Description --- | --- | --- | --- id | string | null | Proxied to underlining <img> tag. className | string | null, space separated list of class names | Proxied to underlining <img> tag. src | string | null | Proxied to underlining <img> tag. alt | string | '' | Proxied to underlining <img> tag. onClick | (e) => {} | null | Proxied to underlining <img> tag, except when edit=true. onMouseMove | (e) => {} | null | Proxied to underlining <img> tag. x | number | undefined | Start CSS left (pixels) y | number | undefined | Start CSS top (pixels) x2 | number | undefined | End CSS left (pixels) y2 | number | undefined | End CSS top (pixels) w | number | undefined | CSS width (pixels) h | number | undefined | CSS height (pixels) defaultSettings | object | | see Passing Props section debug | boolean | false | Switch on logging to the console name | string | '' | used component debug markStyle | object | {} | CSS Style of marker markClass | string | '' | CSS class to describe mark edit | boolean | false | Click on image to start drawing saveBox | (coord) => {} | | Stub implementation

License

LICENCE Copyright (c) 2024 David Newcomb https://www.bigsoft.co.uk/