# react-selectronic

> ![Build Status](https://circleci.com/gh/WendellLiu/react-selectronic.png?circle-token=6cb81d93caa745b04d31d9dbf5ff73e47a74b7ea)

Latest version **2.0.1** (published 2018-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-selectronic
pnpm add react-selectronic
yarn add react-selectronic
bun add react-selectronic
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2018-05-22 |
| First published | 2016-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 80.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Wendell Liu |
| Maintainers | wendellliu |

## Links

- npm: https://www.npmjs.com/package/react-selectronic
- Repository: https://github.com/WendellLiu/react-selectronic
- Homepage: https://github.com/WendellLiu/react-selectronic#readme
- Issues: https://github.com/WendellLiu/react-selectronic/issues
- npm.io page: https://npm.io/package/react-selectronic

## Recent versions

- 2.0.1 (latest) — 2018-05-22
- 0.0.2 (beta) — 2016-11-29
- 2.0.0 — 2018-02-20
- 1.0.0 — 2017-07-25
- 0.2.0 — 2016-12-01
- 0.1.8 — 2016-12-01
- 0.1.7 — 2016-12-01
- 0.1.6 — 2016-12-01
- 0.1.5 — 2016-12-01
- 0.1.4 — 2016-12-01
- 0.1.3 — 2016-12-01
- 0.1.2 — 2016-12-01
- 0.1.0 — 2016-12-01
- 0.0.1 — 2016-11-29

## README

# react-selectronic

![Build Status](https://circleci.com/gh/WendellLiu/react-selectronic.png?circle-token=6cb81d93caa745b04d31d9dbf5ff73e47a74b7ea)


inspired by [unclecheese](https://github.com/unclecheese)/[react-selectable](https://github.com/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
```sh
yarn add react-selectronic
```

or

```sh
npm install --save react-selectronic
```

## Example

```js
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
```sh
yarn start
```

the demo page will served on port **5000**

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