Nocturnal Programmer's Machine
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

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

4

version

0.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability