Skip to content

rwu823/react-selection

Repository files navigation

version Build Status Coverage

React Selection

Like the normal OS selection, it builds in algorithm for detect two rectangles are overlap, so the performance is pretty fast.

Live Demo

https://rwu823.github.io/react-selection/demo

Usage

<link href="/dist/react-selection.css" rel="stylesheet" />
import Selection from 'react-selection'

afterSelect = (selectedTargets)=>{
  const hasSelected = selectedTargets.length
}

render() {  
  <Selection target=".target" afterSelect={this.afterSelect}>
    <ul>
      <li><span className="target">React</span>
        <ul>
          <li><span className="target">redux</span></li>
          <li><span className="target">react-redux</span></li>
          <li><span className="target">react-router</span></li>
          <li><span className="target">redux-thunk</span></li>
          <li><span className="target">redux-logger</span></li>
          <li><span className="target">redux-saga</span></li>
        </ul>
      </li>
    </ul>
  </Selection>
}

API

Props

static propTypes = {
  target: PropTypes.string.isRequired,
  selectedClass: PropTypes.string,
  afterSelect: PropTypes.func,
  isLimit: PropTypes.bool,
}

static defaultProps = {
  target: '.react-selection-target',
  selectedClass: 'react-selection-selected',
  isLimit: false,
  afterSelect() {

  }
}
name description
target [String] required, it should be a css select
selectedClass [String] add selected class
isLimit [Boolean] limit select range inside box
afterSelect Function([selectedTargets]) be triggered after select, the select targets are native DOMList

Customization

If you want to custom your rectangle selection, it just overwrites .react-selection-rectangle class

.react-selection-rectangle {
  pointer-events: none;
  transition: opacity .4s;
  position: absolute;
  background-color: rgba(204,204,204 .2);
  border: 1px solid #ccc;
}