Awesome Open Source
Awesome Open Source

Selectable items for React

Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items. Forked from react-selectable

Installation

npm install react-scroll-selectable
bower install react-scroll-selectable

Usage

JavaScript ES5

var React = require('react');
var Selectable = require('react-selectable');

var App = React.createClass({
  render: function () {
    return (
      <Selectable onSelection={this.handleSelection}>
        {this.props.items.map(function(item, i) {
          return <MyItem key={i}>{item.title}</MyItem>;
        })}
      </Selectable>
    );
  },
  handleSelection: function (keys) {
    console.log('you selected the following keys', keys);
  }
});

var MyItem = React.createClass({
  render: function () {
    return (
      <div className={this.props.selected ? 'selected' : ''>
        {this.props.children}
      </div>
    );
  }
});

JavaScript ES6

import React, {Component} from 'react';
import Selectable from 'react-selectable';

class App extends Component {
  render() {
    return (
      <Selectable onSelection={this.handleSelection}>
        {this.props.items.map((item, i) => (
          <MyItem key={i}>{item.title}</MyItem>
        ))}
      </Selectable>
    );
  }
  handleSelection(keys) {
    console.log('you selected the following keys', keys);
  }
}

class MyItem extends Component {
  render() {
    return (
      <div className={this.props.selected ? 'selected' : ''>
        {this.props.children}
      </div>
    );
  }
}

Selected items receive the property selected.

Configuration

The component accepts a few optional props:

  • selectboxBorderWidth (number) The border-width of selectbox.
  • selectboxBorderStyle (string) The border-style of selectbox.
  • selectboxBorderColor (string) The border-color of selectbox.
  • onSelection (function) Fired after user completes selection
  • tolerance (number|object) The amount of buffer to add around your <Selectable /> container, in pixels. To set custom tolerances for each border of the container, pass an object containing values for top, left, bottom, and right, e.g. { top: 30, left: 40, bottom: 100, right: 0 }.
  • component (string) The component to render. Defaults to div.
  • disabled (boolean) disable selectable or not.
  • autoScroll (boolean) Auto-scrolling of parent component.
  • scrollSpeed (number) The speed of auto-scrolling.
Alternatives To React Scroll Selectable
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,122,137
Reactjs (171,026
Mouse (6,813
Scrolling (3,655
Selectbox (168