React Bounding Box Component displays bounding boxes on an image inside an HTML Canvas.
Demo: https://alx.github.io/react-bounding-box/
- 🎯 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
npm install react-bounding-box
# or
yarn add react-bounding-box<Boundingbox image={params.image}
boxes={params.boxes}
options={params.options}
/>
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
}
};
<Boundingbox image={params.image}
pixelSegmentation={params.segmentation}
/>
To load segmentation data from a json file generated by deepdetect :
<Boundingbox image={params.image}
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 :
<Boundingbox
image={'http://localhost/ADE_val_00000761.jpg'}
segmentationJson={'./ADE_val_00000761.json'}
separateSegmentation={true}
/>
# 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 formatThis project includes automated security scanning:
# Run security audit
npm run security:audit
# Check for vulnerabilities
npm run security:checkThis project uses GitHub Actions for continuous integration and deployment:
-
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
-
Automatic Publishing: Push a git tag starting with
v(e.g.,v1.0.0)git tag v1.0.0 git push origin v1.0.0
-
Manual Release: Use GitHub Actions workflow_dispatch
- Go to Actions tab → Release Management
- Select version type (patch/minor/major)
- Trigger the workflow
- Automated dependency updates every Monday
- Security vulnerability scanning on every build
- npm audit checks with configurable severity levels
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Note: All PRs must pass CI/CD checks including tests, linting, and security scans.
This project is licensed under the MIT License - see the LICENSE file for details.
- 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
- 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
- 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
minimatchandserialize-javascriptdependencies - @dependabot
- FIX: segmentation is redrawn when nextProps.pixelSegmentation is updated
- FIX: add missing redraw when resizing canvas after loading a new image
- FIX: only resize canvas when loaded image change dimensions
- 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
- Use absolute value to compute width and height from coordinates
- Fix deprecated
React.PropTypes
- add image segmentation display available in deepdetect
- specific drawLabel prop function
- new object model available inside boxes prop
- change drawBox function prop to support box label
- add drawBox function prop to customize how the box will be displayed
- add selectedIndex and onSelected props to allow external modification/observation of selected bounding box
- use react-cdk yeoman generator to make simple component and use storybook
- eslint on bounding box component
- add missing Boundingbox displayName
- fix issue with canvas width/height on firefox
- review options colors structure
- options is optional, and defaultProps for colors
- get image size with javascript
- First commit
- Simple example with mouse hover on boxes
- 06/2016 - Inspiration: DenseCap
- 09/2016 - First prototype in production: recognition.tate.org.uk