react-selectronic

inspired by unclecheese/react-selectable

Usage

1. support group selection with the shift key
2. support multiple selection with the ctrl key(Windows OS) and the cmd key(Mac OS)
3. not support group-selection with dragging

Install

yarn add react-selectronic

or

npm install --save react-selectronic

Example

import React from 'react';
import {
  SelectableGroup,
  createSelectable
} from 'react-selectronic';

const Foo = ({ selected, id, onClick }) => (
  <div
    className={selected ? 'selected' : 'unselected'}
    onClick={onClick}
  >
  </div>
);

const SelectableFoo = createSelectable(Foo);
const elements = [1, 2, 3, 4, 5, 6, 7];

class App extends React.Component {
  this.state = {
    selectedList: [],
  };

  render() {
    return (
      <SelectableGroup
        selectedList={this.state.selectedList}
        onChange={this.handleChange}
        uidList={elements}
      >
        {
          elements.map((ele) => (
            <SelectableFoo 
              key={ele} 
              uid={ele} // uid is required
            /> 
          ))
        }
        <div className="nonSelectable" /> // you can insert any component not selectable
      </SelectableGroup>
    );
  }
}

Components

SelectableGroup

Description

Click functions provider which handling the selecting strategy

Props

prop | type | default | required | notes -----------------|----------|--------------|----------|------ selectedList | Array<> | [] | v | Selected list onChange | SelectedList => void | | v | Handle next seelctedList uidList | Array<> | | v | All uid(including non-selected) of data Component | Component | 'div' | | Component of SelectableGroup

createSelectable

Description

An HOC to wrap onClick

Props

prop | type | default | required | notes -----------------|----------|------------|-------------|--------- uid | * | | v | Unique id of the element selected | boolean | | v | Whether element is selected onClick | event => any | | | Additional click callback

Caution: wrapped component(as Foo above) must be taken onClick property for selection-function.

Development

yarn start

the demo page will served on port 5000