A component for react that allows mouse selection of child items
Branch: master
Clone or download
Latest commit d2436e9 Feb 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example Added selectOnMouseMove to state constructor. Removed unused state pr… May 3, 2016
src Using prop-types instead of React.PropTypes Oct 19, 2017
.babelrc Several major API changes Feb 7, 2016
.gitignore webpack build of only react-selectable code Sep 20, 2015
LICENSE Initial commit Mar 6, 2015
README.md Decorator example added to README - #31 Sep 7, 2017
UPGRADING.md Update UPGRADING.md Feb 8, 2016
example.js Several major API changes Feb 7, 2016
package-lock.json Changes required for transition to webpack@2 Oct 19, 2017
package.json version bump Feb 22, 2018
react-selectable.d.ts SelectableComponent props are optional as well Feb 20, 2018
webpack.config.example.js Webpack@2 config changes for example config Oct 19, 2017
webpack.config.js Changes required for transition to webpack@2 Oct 19, 2017

README.md

Selectable items for React

Allows individual or group selection of items using the mouse.

Demo

Try it out

Upgrading from 0.1 to 0.2

There have been significant changes in the 0.2 release. Please read about them here.

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 (
      <SelectableGroup onSelection={this.handleSelection}>
        {this.props.items.map((item, i) => {
          	let selected = this.state.selectedKeys.indexOf(item.id) > -1;
          	return (
          		<SelectableComponent key={i} selected={selected} selectableKey={item.id}>
          			{item.title}
          		</SelectableComponent>
          	);
        })}
      </SelectableGroup>
    );
  },

  handleSelection (selectedKeys) {
  	this.setState({ selectedKeys });
  }

}

Configuration

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

  • onSelection (Function) Callback fired after user completes selection
  • onNonItemClick (Function) Callback fired when a click happens within the selectable group component, but not in a selectable item. Useful for clearing selection.
  • tolerance (Number) The amount of buffer to add around your <SelectableGroup /> container, in pixels.
  • component (String) The component to render. Defaults to div.
  • fixedPosition (Boolean) Whether the <SelectableGroup /> container is a fixed/absolute position element or the grandchild of one. Note: if you get an error that Value must be omitted for boolean attributes when you try <SelectableGroup fixedPosition={true} />, simply use Javascript's boolean object function: <SelectableGroup fixedPosition={Boolean(true)} />.
  • selectOnMouseMove (Boolean) Enable to fire the onSelection callback while the mouse is moving. Throttled to 50ms for performance in IE/Edge
  • preventDefault (Boolean) Allows to enable/disable preventing the default action of the onmousedown event (with e.preventDefault). True by default. Disable if your app needs to capture this event for other functionalities.
  • enabled (Boolean) If false, all of the selectable features are disabled, and event handlers removed.

Decorators

Though they are optional, you can use decorators with this react-selectable.

A side by side comparison is the best way to illustrate the difference:

Without Decorators

class SomeComponent extends Component {

}
export default createSelectable(SomeComponent)

vs.

With Decorators

@createSelectable
export default class SomeComponent extends Component {

}

In order to enable this functionality, you will most likely need to install a plugin (depending on your build setup). For Babel, you will need to make sure you have installed and enabled babel-plugin-transform-decorators-legacy by doing the following:

  1. run npm i --save-dev babel-plugin-transform-decorators-legacy
  2. Add the following line to your .babelrc:
{
  "plugins": ["transform-decorators-legacy"]
}