1.0.4 • Published 7 years ago
react-rectangle-selection v1.0.4
React Rectangle Selection
Installation
npm install --save react-rectangle-selection
How To Use
First import this component where you want to use it
import RectangleSelection from "react-rectangle-selection"
Then wrap it around the component that will trigger the selection box.
render() {
return(
<RectangleSelection
onSelect={(e, coords) => {
this.setState({
origin: coords.origin,
target: coords.target
});
}}
style={{
backgroundColor: "rgba(0,0,255,0.4)",
borderColor: "blue"
}}
>
<div className="App" />
</RectangleSelection>
)
}Props
| Prop | Description |
|---|---|
| onSelect | Accepts a function that returns the coordinates of the page |
| onMouseUp | Returns on mouse up |
| onMouseDown | Returns on mouse down |
| style | Sets the style of the selection rectangle |
| disabled | Disable the selection |
Demo
RectangleSelection Demo