1.0.4 • Published 5 years ago

react-rectangle-selection v1.0.4

Weekly downloads
45
License
ISC
Repository
-
Last release
5 years ago

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

PropDescription
onSelectAccepts a function that returns the coordinates of the page
onMouseUpReturns on mouse up
onMouseDownReturns on mouse down
styleSets the style of the selection rectangle
disabledDisable the selection

Demo

RectangleSelection Demo

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago