# selectable-react

> React JS Selectable

Latest version **1.0.1** (published 2018-04-09) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-04-09 |
| First published | 2018-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 122.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Mert Koseoglu |
| Maintainers | mksglu |
| Keywords | react, drag, marquee |

## Links

- npm: https://www.npmjs.com/package/selectable-react
- Repository: https://github.com/mksglu/react-drag-tool
- Homepage: https://github.com/mksglu/react-drag-tool#readme
- Issues: https://github.com/mksglu/react-drag-tool/issues
- npm.io page: https://npm.io/package/selectable-react

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.3.1
- [react-dom](https://npm.io/package/react-dom.md) 16.3.1
- [prop-types](https://npm.io/package/prop-types.md) 15.6.1

## 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

- 1.0.1 (latest) — 2018-04-09
- 1.0.0 — 2018-04-09
- 0.1.7 — 2018-04-05
- 0.1.6 — 2018-04-05
- 0.1.5 — 2018-04-05
- 0.1.4 — 2018-04-05
- 0.1.3 — 2018-04-05
- 0.1.2 — 2018-04-05
- 0.1.1 — 2018-04-05
- 0.1.0 — 2018-04-05

## README

# Selectable React JS

## Getting started

[![selectable-react](https://nodei.co/npm/selectable-react.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/selectable-react)

## Demo

[Try it out](https://frozen-depths-40634.herokuapp.com/)

![Alt Text](https://thumbs.gfycat.com/AliveMilkyHypacrosaurus-size_restricted.gif)

```shell
npm install selectable-react --save
```

```javascript
import React, { Component } from "react"
import "../App.css"
import mockData from "./data"
import ReactSelectable from "../Selectable"
import logo from "./logo.svg"

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      item: [],
      selectedItem: []
    }
  }

  componentDidMount() {
    this.setState({
      item: mockData
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div className="output">
            {this.state.selectedItem.map((itemList, index) => (
              <li key={index}>{itemList}</li>
            ))}
          </div>
          <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <ReactSelectable
          selectedItemClassName="secili item-selected"
          containerClassName="selectable-container"
          onSelectChange={item => this.setState({ selectedItem: item })}
        >
          {this.state.item.map((mockItem, index) => {
            return <div key={index}>{mockItem.name}</div>
          })}
        </ReactSelectable>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />{" "}
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  }
}

export default App
```

```javascript
const data = [
  { name: "Bumblebee" },
  { name: "Jazz" },
  { name: "İronhide" },
  { name: "Megatron" },
  { name: "Blackout" },
  { name: "Scorponok" }
]

export default data
```

```css
.selectable-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;
}

.item-selected {
  height: 100px;
  width: 100px;
  background-color: #b93c2f;
  border: 1px solid #626262;
  margin: 3px;
  user-select: none;
}

.secili {
  background-color: chartreuse;
}
```

## Configuration

The `<ReactSelectable />` component accepts a few optional props:

* `onSelectChange` (Function) Callback returns selected elements.
* `containerClassName` Wrapper element style.
* `selectedItemClassName` Selected ıtem style.

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