# react-dticheckboxlist

> React list component with checkbox

Latest version **1.0.4** (published 2022-11-29) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-11-29 |
| First published | 2022-11-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 30.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Luciano Dória |
| Maintainers | lucianodoria |

## Links

- npm: https://www.npmjs.com/package/react-dticheckboxlist
- Repository: https://github.com/lucianodoria/dticheckboxlist
- Homepage: https://github.com/lucianodoria/dticheckboxlist#readme
- Issues: https://github.com/lucianodoria/dticheckboxlist/issues
- Funding: https://github.com/lucianodoria/dticheckboxlist?sponsor=1
- npm.io page: https://npm.io/package/react-dticheckboxlist

## Recent versions

- 1.0.4 (latest) — 2022-11-29
- 1.0.3 — 2022-11-27
- 1.0.2 — 2022-11-23
- 1.0.1 — 2022-11-23
- 1.0.0 — 2022-11-23

## README

# react-dticheckboxlist

> React list component with checkbox

[![NPM](https://img.shields.io/npm/v/react-dticheckboxlist.svg)](https://www.npmjs.com/package/react-dticheckboxlist) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-dticheckboxlist
```
<p align="center">
    <img alt="read before" src="screenshot3.png" />
</p>

## Example code of how to use

```jsx
import React, { Component } from 'react'
import DTICheckBoxList from 'react-dticheckboxlist'

class Example extends Component {
  const items =
    [{
      "id": "1",
      "label": "Cars",
      "disabled": false,
    },

    {
      "id": "2",
      "label": "Bicycles",
      "disabled": false,
    },

    {
      "id": "3",
      "label": "Trucks",
      "disabled": true,
    }
    ]

  const itemsSelecteds =
    [

      {
        "id": "2",
      },

      {
        "id": "3",
      }
    ]

    const [state, setState] = useState({
      items: items,
      itemsSelecteds: itemsSelecteds,
    });

    const handleChangeSelect = (prop) => {
      setState({
        ...state,
        itemsSelecteds: prop,
      });
    };

  render() {
    return
    <DTICheckBoxList
        items={state.items}
        selectedItems={state.itemsSelecteds}
        showSelectedAll={true}
        labelSelectedAll={"Select All"}
        checkBoxSelectedAllColor={'#3f51b5'}
        checkBoxSelectedAllLabelColor={'#3f51b5'}
        checkBoxColor={'#3f51b5'}
        checkBoxLabelColor={'#3f51b5'}
        backgroundColorCheckBoxSelected={'#f7f7f7'}
        onChange={handleChangeSelect}
        />
  }
}
```
## Color Scheme
<p align="center">
    <img alt="read before" src="screenshot2.png" />
</p>
## License

MIT © [lucianodoria](https://github.com/lucianodoria)

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