# react-interactive-list

> A dynamic interactive list with add/remove functionality

Latest version **0.6.4** (published 2017-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-interactive-list
pnpm add react-interactive-list
yarn add react-interactive-list
bun add react-interactive-list
```

## 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.6.4 |
| Published | 2017-10-07 |
| First published | 2017-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kfir Eichenblat |
| Maintainers | kfirprods |
| Keywords | list, dynamic, interactive, ui, react, react-component, form, input |

## Links

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

## 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.6.4 (latest) — 2017-10-07
- 0.6.3 — 2017-10-06
- 0.6.2 — 2017-10-06
- 0.6.1 — 2017-10-06
- 0.6.0 — 2017-10-06
- 0.5.0 — 2017-10-06
- 0.4.0 — 2017-10-06
- 0.3.0 — 2017-10-06
- 0.2.0 — 2017-10-06
- 0.1.0 — 2017-10-05

## README

# react-interactive-list
![alt text](https://raw.githubusercontent.com/kfirprods/react-interactive-list/master/interactive-list-demo.gif "Demo GIF")

An interactive, dynamic list of components with add / remove buttons.
You define how items are rendered (e.g text input).

### Install
```bash
npm install -s react-interactive-list
```

### Example
#### Live Demos
##### List of text inputs
[![Edit React Interactive List example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/xo690voonw)

##### List of react-select components
[![Edit React Interactive List SELECT example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/r47xkvp9zn)


```javascript
import React from 'react';

import InteractiveList from 'react-interactive-list';
// IMPORTANT: This style is responsible for the basic formation
import 'react-interactive-list/lib/styles/react-interactive-list.css';
// Some extra styling for the input and the delete button
import 'react-interactive-list/lib/styles/react-input-list.css';


class App extends React.Component {
    constructor() {
        super();

        this.renderInput = this.renderInput.bind(this);
    }

    renderInput(props, removable, uniqueId, index, onChangeCallback) {
        let inputClasses = 'interactive-list-input';
        if (removable) {
            inputClasses += ' interactive-list-input--removable';
        }

        return (
            <div className="table">
                <span className="table-cell">{index+1}</span>

                <div className="table-cell">
                    <input type="text"
                           className={inputClasses}
                           onChange={(e) => onChangeCallback(e.target.value)}
                           placeholder={props.placeholder} />
                </div>
            </div>
        );
    }

    render() {
        return (
            <InteractiveList renderItem={this.renderInput}
                             placeholder="Some Text"
                             maxItems={3} />
        );
    }
}

export default App;
```

### Properties
| Property | Type | Description
:---|:---|:---
| `renderItem (required)` | function | Render each item. It must call its 4th parameter `onChangeCallback` when the value of the rendered element changes.
| `onChange` | function | Callback for when anything in the list changes. It is called with the entire list of values each time.
| `onRemoveItem` | function | Callback for when an item is removed. It is called with (uniqueId, value) |
| `minItems` | Number | Minimum amount of items that must be in the list. The X button does not appear when this is the amount of items in the list. Defaults to 1. |
| `maxItems` | Number | Maximum amount of items to be added to the list. The add button becomes disabled once this number of items is reached. Defaults to -1, meaning infinite. |
| `addButtonText` | String | Text to display in the add button. Defaults to 'Add' |


Note that all properties of InteractiveList are also passed to the `renderItem` function (its 1st parameter).

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