npm.io
1.0.4 • Published 7 years ago

react-rectangle-selection

Licence
ISC
Version
1.0.4
Deps
2
Size
18 kB
Vulns
0
Weekly
0

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