React-selectable

A component for react that allows mouse selection of child items

Download .zip Download .tar.gz View on GitHub

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.