https://github.com/leopoldjoy/react-selectable-extended

A component for react that allows mouse/touch selection of child items. Expands on the features of react-selectable
https://github.com/leopoldjoy/react-selectable-extended

Last synced: 3 days ago
JSON representation

A component for react that allows mouse/touch selection of child items. Expands on the features of react-selectable

• Host: GitHub
• URL: https://github.com/leopoldjoy/react-selectable-extended
• Owner: leopoldjoy
• License: mit
• Created: 2016-02-16T05:58:49.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-09T04:09:38.000Z (almost 7 years ago)
• Last Synced: 2024-09-18T11:49:23.575Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 345 KB
• Stars: 9
• Watchers: 4
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Selectable items for React

Allows individual or group selection of items using the mouse/touch.

## Demo

[Try it out](http://leopoldjoy.github.io/react-selectable-extended/example/)

## Based on react-selectable

This project is based on [react-selectable](https://github.com/unclecheese/react-selectable) by [unclecheese](https://github.com/unclecheese). It extends the original functionality in the following ways:

* Adds support for clicking individual items without dragging.

* Adds optional `dontClearSelection` feature to allow for additions to selected items.

* Adds optional `duringSelection` callback feature to allow for a callback function to be called repeatedly throughout selection.

* Adds support for touch-based (mobile) events.

If you are looking for a lightweight, stateless selector and don't need any of the features listed above, go with [react-selectable](https://github.com/unclecheese/react-selectable).

## Getting started

```

npm install react-selectable-extended

```

```js

import React from 'react';

import { render } from 'react-dom';

import { SelectableGroup, createSelectable } from 'react-selectable-extended';

import SomeComponent from './some-component';

const SelectableComponent = createSelectable(SomeComponent);

class App extends React.Component {

  

  constructor (props) {

  	super(props);

  	this.state = {

  		selectedKeys: [],

      selectingKeys: []

  	};

  }

  render () {

    return (

      

        {this.props.items.map((item, i) => {

          	let selected = this.state.selectedKeys.indexOf(item.id) > -1;

            let selecting = this.state.selectingKeys.indexOf(item.id) > -1;

          	return (

          		

          			{item.title}

          		

          	);

        })}

      

    );

  },

  

  handleSelection (selectedKeys) {

  	this.setState({ selectedKeys });

  }

  handleSelecting (selectingKeys) {

    this.setState({ selectingKeys });

  }

	

}

```

## Configuration

The `` component accepts a few optional props:

* `onSelection` (Function) Callback fired after user completes selection

* `duringSelection` (Function) Callback fired rapidly during selection (while the selector is being dragged). Passes an array containing the keys of the items currently under the selector to the callback function.

* `tolerance` (Number) The amount of buffer to add around your `` container, in pixels.

* `component` (String) The component to render. Defaults to `div`.

* `fixedPosition` (Boolean) Whether the `` container is a fixed/absolute position element or the grandchild of one.

* `dontClearSelection` (Boolean) When enabled, makes all new selections add to the already selected items, except for selections that contain *only* previously selected items—in this case it unselects those items.

*NOTE:* For both `fixedPosition` and `dontClearSelection`, if you get an error that `Value must be omitted for boolean attributes` when you try, for example, ``, simply use Javascript's boolean object function: ``.