Selectable items for React

Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items, hold the cmd/ctrl key to select non-adjacent items.

Demo

Try it out

Getting started

npm install react-selectable

import React from 'react';
import { render } from 'react-dom';
import { SelectableGroup, createSelectable } from 'react-selectable';
import SomeComponent from './some-component';

const SelectableComponent = createSelectable(SomeComponent);

class App extends React.Component {
  
  constructor (props) {
  	super(props);
  	this.state = {
  		selectedKeys: []
  	};
  }

  render () {
    return (
      
        {this.props.items.map((item, i) => {
          	let selected = this.state.selectedKeys.indexOf(item.id) > -1;
          	return (
          		
          			{item.title}
          		
          	);
        })}
      
    );
  },
  
  handleSelection (selectedKeys) {
  	this.setState({ selectedKeys });
  }

Selected items receive the property selected.

Configuration

The component accepts a few optional props:

• onSelection (Function) Fired after user completes selection
• tolerance (Number) The amount of buffer to add around your <Selectable /> container, in pixels.
• component (string) The component to render. Defaults to div.