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; }
