react-selectable-fast

Install

npm i -S react-selectable-fast

Demo

Draw a box with your mouse/touch to select items. Click on + icon of an individual item to select it.

JavaScript environment requirements

The React-Selectable-Fast package distributed on NPM use the widely-supported ES5 version of JavaScript to support as many browser environments as possible.

However, this package expects modern JavaScript globals (Map, Set, Array.from, Array.isArray Object.assign) to be defined. If you support older browsers and devices which may not yet provide these natively, consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.

A polyfilled environment for React-Selectable-Fast using core-js to support older browsers might look like this:

import 'core-js/fn/object/assign'
import 'core-js/fn/array/from'
import 'core-js/fn/array/is-array'
import 'core-js/fn/map'
import 'core-js/fn/set'

import App from './myApp';

Usage

Example

Package exports 4 entities { SelectableGroup, createSelectable, SelectAll, DeselectAll }. To make other components selectable wrap them using HoC createSelectable, add passed selectableRef prop to the target node and put a list of seletable items under SelectableGroup.

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

class App extends Component {
  ...

  render() {
    return (
      <SelectableGroup
        className="main"
        clickClassName="tick"
        enableDeselect
        tolerance={this.state.tolerance}
        globalMouse={this.state.isGlobal}
        allowClickWithoutSelected={false}
        duringSelection={this.handleSelecting}
        onSelectionClear={this.handleSelectionClear}
        onSelectionFinish={this.handleSelectionFinish}
        ignoreList={['.not-selectable', '.item:nth-child(10)', '.item:nth-child(27)']}
      >
        <List items={this.props.items} />
      </SelectableGroup>
    )
  }
}

import React from 'react'
import { createSelectable } from 'react-selectable-fast'

const SomeComponent = ({ selectableRef, isSelected, isSelecting }) => (
  <div ref={selectableRef}>...</div>
)

export default createSelectable(SomeComponent)

import React, { Component } 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}
            player={item.player}
            year={item.year}
          />
        ))}
      </div>
    )
  }
}

Configuration

• duringSelection (Function) Callback fired rapidly during selection (while the selector is being dragged). Passes an array containing selectable items currently under the selector to the callback function.
• onSelectionFinish (Function) Callback.
• onSelectionClear (Function) Callback.
• enableDeselect (Boolean) Enables deselect with selectbox.
• mixedDeselect (Boolean) When enabled items can be selected and deselected with selectbox at the same time, enableDeselect should be set to true.
• scrollContainer (String) Selector of scroll container which will be used to calculate selectbox position. If not specified SelectableGroup element will be used as scroll container.
• ignoreList (Array) Array of ignored selectors.
• disableSelectStartList (Array) Array of selectors where select lasso can not be started by dragging mouse. Useful if you want to enable drag of selectables.
• clickableClassName (String) On element with specified selector click item cotaining this element will be selected.
• tolerance (Number) The amount of buffer to add around your <SelectableGroup /> container, in pixels.
• className (String) Class of selectable group element.
• selectionModeClass (String) Class indicating that there are more than 1 selected item. Defaults to 'in-selection-mode'.
• component (String) The component to render. Defaults to div.
• allowClickWithoutSelected (Boolean) When disabled items can be selected by click only if there are more than 1 already selected item.
• fixedPosition (Boolean) Whether the <SelectableGroup /> container is a fixed/absolute position element or the grandchild of one.
• resetOnStart (Boolean) Unselect all items when you start a new drag. Default value is false.
• disabled (Boolean) Enable or disable the selectable draggable, useful if you want to enable drag of sub-items. Default value is false.
• delta (Number) Value of the CSS transform property scaled list, useful if your list of items in <SelectableGroup /> is wrapped by a scale css transform property. Default value is 1.
• selectOnClick (Boolean) Allow selecting by clicking items. Default value is true
• allowAltClick (Boolean) Perform select actions even though the alt key is down when clicking or dragging. Default value is false
• allowCtrlClick (Boolean) Perform select actions even though the ctrl key is down when clicking or dragging. Default value is false
• allowMetaClick (Boolean) Perform select actions even though the meta key is down when clicking or dragging. Default value is false
• allowShiftClick (Boolean) Perform select actions even though the shift key is down when clicking or dragging. Default value is false

Development

Clean lib and dist folders

npm run clean

Watch src folder

npm run watch

Start example dev-server

npm run watch:example

Lint src folder

npm run lint

License

See MIT