react-rectangle-selection

A rectangle selection tool

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-rectangle-selection
1.0.44 years ago4 years agoMinified + gzip package size for react-rectangle-selection in KB

Readme

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. ```jsx 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" />
) } ```

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