React Bounding Box Component


React Bounding Box Component displays bounding boxes on an image inside an HTML Canvas.

!Screenshot

Demo: https://alx.github.io/react-bounding-box/

Features

- 🎯 Interactive bounding boxes with click selection
- 🖼️ Image and base64 support
- 🎨 Customizable colors and styling
- 📱 Responsive design
- 🧪 Comprehensive test coverage
- 📦 Modern build system with Webpack 5
- 🔒 TypeScript definitions included

Installation

``bash
npm install react-bounding-box


or


yarn add react-bounding-box
`

Usage

`
boxes={params.boxes}
options={params.options}
/>
`

Params

Commented options are not yet implemented.

`
const params = {
image: 'http://i.imgur.com/gF7QYwa.jpg',
boxes: [
// coord(0,0) = top left corner of image
//[x, y, width, height]
[0, 0, 250, 250],
[300, 0, 250, 250],
[700, 0, 300, 25],
[1100, 0, 25, 300]
// {coord: [0, 0, 250, 250], label: "test"},
// {coord: [300, 0, 250, 250], label: "A"},
// {coord: [700, 0, 300, 25], label: "B"},
// {coord: [1100, 0, 25, 300], label: "C"}
],
options: {
colors: {
normal: 'rgba(255,225,255,1)',
selected: 'rgba(0,225,204,1)',
unselected: 'rgba(100,100,100,1)'
},
style: {
maxWidth: '100%',
maxHeight: '90vh'
}
//showLabels: false
}
};
`

Segmentation

!Segmentation

`
pixelSegmentation={params.segmentation}
/>
`

To load segmentation data from a json file generated by deepdetect :

`
segmentationJson={'./ADE_val_00000761.json'}
/>
`

When you want to display the segmentation of an image not hosted in the same domain as your react app, you'll find the following error: Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

To avoid this issue, the segmentation can be displayed side-by-side :

`
image={'http://localhost/ADE_val_00000761.jpg'}
segmentationJson={'./ADE_val_00000761.json'}
separateSegmentation={true}
/>
`

!Segmentation Remote

Development

`bash


Install dependencies

npm install

Run tests

npm test

Run tests with coverage

npm run test:coverage

Run linting

npm run lint

Build the project

npm run build

Format code

npm run format
`

Security

This project includes automated security scanning:

`bash


Run security audit

npm run security:audit

Check for vulnerabilities

npm run security:check
`

CI/CD Pipeline

This project uses GitHub Actions for continuous integration and deployment:

$3

- CI/CD Pipeline: Runs on every push and PR
- Installs dependencies with caching
- Runs linting and type checking
- Executes all tests with coverage
- Performs security audits
- Builds the package
- Publishes to npm on tagged releases

- Code Quality: Additional quality checks
- Prettier formatting verification
- Bundle size analysis
- Console statement detection
- TODO/FIXME comment detection

- Release Management: Manual workflow for creating releases
- Version bumping (patch/minor/major)
- Changelog generation
- Git tagging
- GitHub release creation

$3

1. Automatic Publishing: Push a git tag starting with v (e.g., v1.0.0)

`bash
git tag v1.0.0
git push origin v1.0.0
`

2. Manual Release: Use GitHub Actions workflow_dispatch
- Go to Actions tab → Release Management
- Select version type (patch/minor/major)
- Trigger the workflow

$3

- Automated dependency updates every Monday
- Security vulnerability scanning on every build
- npm audit checks with configurable severity levels

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Note: All PRs must pass CI/CD checks including tests, linting, and security scans.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

$3

- BREAKING: Modernized to React 18+ with new JSX transform
- BREAKING: Updated minimum Node.js requirement to 16+
- Migrated to Webpack 5 and Babel 7
- Added comprehensive Jest testing with React Testing Library
- Implemented modern CI/CD with GitHub Actions
- Added automated security scanning and code quality tools
- Enhanced package exports and build output
- Zero npm audit vulnerabilities

Previous Changelog

$3

- fix: disable pointer-events on segmentation canvas
- fix: clean segCanvas when receiving new props
- fix: check null on this.props.boxes in renderBoxes
- fix: set boxes as empty array by default
- fix: remove unused backup file

$3

- FIX: Image is not redrawn on update
#15 - Thanks @testower
- FIX: display boxes when xmin/ymin on 0 value
- FIX: split storybook stories to use state outside component
- FIX: update minimatch and serialize-javascript dependencies - @dependabot

$3

- FIX: segmentation is redrawn when nextProps.pixelSegmentation is updated

$3

- FIX: add missing redraw when resizing canvas after loading a new image
- FIX: only resize canvas when loaded image change dimensions

$3

- FIX: use props.forceRedraw property to redraw canvas
- FIX: replace array.some() method by classic for() loop
- FIX: check new image dimension and data before to redraw it in canvas
- FIX: update background width and height after loading a new image

$3

- Use absolute value to compute width and height from coordinates

$3

- Fix deprecated React.PropTypes`

$3

- add image segmentation display available in deepdetect

$3

- specific drawLabel prop function

$3

- new object model available inside boxes prop
- change drawBox function prop to support box label

$3

- add drawBox function prop to customize how the box will be displayed

$3

- add selectedIndex and onSelected props to allow external modification/observation of selected bounding box

$3

- use react-cdk yeoman generator to make simple component and use storybook
- eslint on bounding box component

$3

- add missing Boundingbox displayName

$3

- fix issue with canvas width/height on firefox

$3

- review options colors structure
- options is optional, and defaultProps for colors

$3

- get image size with javascript

$3

- First commit
- Simple example with mouse hover on boxes

History

- 06/2016 - Inspiration: DenseCap
- 09/2016 - First prototype in production: recognition.tate.org.uk