# react-scroll-selectable

> A compoent for react that allows mouse selection of child items with auto-scrolling.

Latest version **0.1.6** (published 2015-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-scroll-selectable
pnpm add react-scroll-selectable
yarn add react-scroll-selectable
bun add react-scroll-selectable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2015-11-10 |
| First published | 2015-08-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kako0507 |
| Keywords | react, drag, scroll, select, selection, selectable |

## Links

- npm: https://www.npmjs.com/package/react-scroll-selectable
- Repository: https://github.com/kako0507/react-scroll-selectable
- Issues: https://github.com/kako0507/react-scroll-selectable/issues
- npm.io page: https://npm.io/package/react-scroll-selectable

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2015-11-10
- 0.1.5 — 2015-10-12
- 0.1.4 — 2015-10-12
- 0.1.3 — 2015-10-12
- 0.1.2 — 2015-10-12
- 0.1.1 — 2015-10-02
- 0.1.0 — 2015-08-20

## README

# Selectable items for React

Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items.
Forked from [react-selectable](https://github.com/unclecheese/react-selectable)

## Installation

```
npm install react-scroll-selectable
bower install react-scroll-selectable
```

## Usage

### JavaScript ES5

```js
var React = require('react');
var Selectable = require('react-selectable');

var App = React.createClass({
  render: function () {
    return (
      <Selectable onSelection={this.handleSelection}>
        {this.props.items.map(function(item, i) {
          return <MyItem key={i}>{item.title}</MyItem>;
        })}
      </Selectable>
    );
  },
  handleSelection: function (keys) {
    console.log('you selected the following keys', keys);
  }
});

var MyItem = React.createClass({
  render: function () {
    return (
      <div className={this.props.selected ? 'selected' : ''>
        {this.props.children}
      </div>
    );
  }
});
```

### JavaScript ES6

```js
import React, {Component} from 'react';
import Selectable from 'react-selectable';

class App extends Component {
  render() {
    return (
      <Selectable onSelection={this.handleSelection}>
        {this.props.items.map((item, i) => (
          <MyItem key={i}>{item.title}</MyItem>
        ))}
      </Selectable>
    );
  }
  handleSelection(keys) {
    console.log('you selected the following keys', keys);
  }
}

class MyItem extends Component {
  render() {
    return (
      <div className={this.props.selected ? 'selected' : ''>
        {this.props.children}
      </div>
    );
  }
}
```

Selected items receive the property `selected`.

## Configuration

The component accepts a few optional props:
* `selectboxBorderWidth` (number) The border-width of selectbox.
* `selectboxBorderStyle` (string) The border-style of selectbox.
* `selectboxBorderColor` (string) The border-color of selectbox.
* `onSelection` (function) Fired after user completes selection
* `tolerance` (number|object) The amount of buffer to add around your `<Selectable />` container, in pixels. To set custom tolerances for each border of the container, pass an object containing values for `top`, `left`, `bottom`, and `right`, e.g. `{ top: 30, left: 40, bottom: 100, right: 0 }`.
* `component` (string) The component to render. Defaults to `div`.
* `disabled` (boolean) disable selectable or not.
* `autoScroll` (boolean) Auto-scrolling of parent component.
* `scrollSpeed` (number) The speed of auto-scrolling.

---
_Source: https://npm.io/package/react-scroll-selectable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._