react-item-select v1.0.2

react-item-select

A React component that takes away the pain of managing item selection state in tables and lists

https://react-item-select.now.sh

Install

npm i --save react-item-select

Usage

Basic

import withSelections from 'react-item-select';

const MyBasicList = ({ handleSelect, isItemSelected }) => (
  <div>
    <div>
      <input name="first" type="checkbox" checked={isItemSelected(1)} onChange={handleSelect(1)} />
    </div>
    <div>
      <input name="first" type="checkbox" checked={isItemSelected(2)} onChange={handleSelect(2)} />
    </div>
</div>

export default withSelections(MyBasicList);

Table

import withSelections from 'react-item-select';

const items = [{id: 1, name: 'One'}, {id: 2, name: 'Two'}, {id: 3, name: 'Three'}];

const MyTable = ({ handleSelect, isItemSelected }) => (
  <table>
    <tbody>
      {items.map(item => (
        <tr>
          <td>
            <input name="first" type="checkbox" checked={isItemSelected(item.id)} onChange={handleSelect(item.id)} />
          </td>
          <td>
            {item.name}
          </td>
        </tr>
      ))}
    </tbody>
  </table>
);

export default withSelections(MyTable);

Semantic UI React Table

import withSelections from 'react-item-select';
import { Table } from 'semantic-ui-react';

const items = [{id: 1, name: 'One'}, {id: 2, name: 'Two'}, {id: 3, name: 'Three'}];

const MyTable = ({ handleSelect, isItemSelected }) => (
  <Table>
    <Table.Body>
      {items.map(item => (
        <Table.Row>
          <Table.Cell>
            <Checkbox checked={isItemSelected(item.id)} onChange={handleSelect(item.id)} />
          </Table.Cell>
          <Table.Cell>
            {item.name}
          </Table.Cell>
        </Table.Row>
      ))}
    </Table.Body>
  </Table>
);

export default withSelections(MyTable);

Options