React-selectable-fast

Enable a React component (or group of components) to be selectable via mouse/touch.

Demo

http://valerybugakov.github.io/react-selectable-fast

Install

npm i -S react-selectable-fast

Based on react-selectable

This project is based on react-selectable by unclecheese. Main idea of this fork is to eliminate render during selection caused by state updates of SelectableGroup. Only items under selectbox rerender themself, which great for big lists of selectable items. Also this package extends the original functionality with ability to scroll items while selecting relative to window and specified scroll container.

Usage

Package exports 4 components { SelectableGroup, createSelectable, SelectAll, DeselectAll }. To make other components selectable create selectable component with createSelectable function and put a list of them under SelectableGroup.

import React, { Component, PropTypes } from 'react'
import { SelectableGroup } from 'react-selectable-fast'

class App extends Component {
  ...

  render() {
    return (
      <SelectableGroup
        className="main"
        clickableClassName="tick"
        duringSelection={this.handleSelecting}
        onSelectionFinish={this.handleSelectionFinish}
        onSelectionClear={this.handleSelectionClear}
        globalMouse={this.state.isGlobal}
        tolerance={this.state.tolerance}
        whiteList={['.not-selectable']}
        allowClickWithoutSelected={false}
        dontClearSelection
      >
        <List items={this.props.items} />
      </SelectableGroup>
    )
  }
}

import React, { Component, PropTypes } from 'react'
import { createSelectable, SelectAll, DeselectAll } from 'react-selectable-fast'
import SomeComponent from './SomeComponent'

const SelectableComponent = createSelectable(SomeComponent)

class List extends Component {
  ...

  render() {
    return (
      <div>
        <SelectAll className="selectable-button">
          <button>Select all</button>
        </SelectAll>
        <DeselectAll className="selectable-button">
          <button>Clear selection</button>
        </DeselectAll>
        {this.props.items.map((item, i) => (
          <SelectableComponent
            key={i}
            title={item.title}
            year={item.year}
          />
        ))}
      </div>
    )
  }
}

Configuration

The <SelectableGroup /> component accepts a few optional props: