Like the normal OS selection, it builds in algorithm for detect two rectangles are overlap, so the performance is pretty fast.
https://rwu823.github.io/react-selection/demo
<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>
}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 |
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;
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent