Nirvana Playing Madonna
Join us to discuss the challenges, solutions and best practices for in-house JavaScript code sharing. Tuesday, 12/17 at 10am PT/1pm ET.Sign up here »

react-selection

0.1.0 • Public • Published

version Build Status Coverage

React Selection

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

Install

npm i react-selection

DownloadsWeekly Downloads

13

Version

0.1.0

License

MIT

Last publish

Collaborators

  • avatar