react-rectangle-selection icon indicating copy to clipboard operation
react-rectangle-selection copied to clipboard

A rectangle selection box for React that gives your coordinates of the page

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