# item-checked-custom

> ClassFunc item checked custom use antd and styled component

Latest version **1.1.8** (published 2022-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install item-checked-custom
pnpm add item-checked-custom
yarn add item-checked-custom
bun add item-checked-custom
```

## 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.1.8 |
| Published | 2022-01-21 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 304.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | duongdam |
| Maintainers | duong.dkp, maithiet |
| Keywords | antd, react item checked, styled component, classfunc library |

## Links

- npm: https://www.npmjs.com/package/item-checked-custom
- Repository: https://github.com/duongdam/item-checked-custom
- Homepage: https://github.com/duongdam
- Issues: https://github.com/duongdam/item-checked-custom/issues
- npm.io page: https://npm.io/package/item-checked-custom

## Dependencies (2)

- [antd](https://npm.io/package/antd.md) ^4.13.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.1

## Recent versions

- 1.1.8 (latest) — 2022-01-21
- 1.1.7 — 2021-12-21
- 1.1.6 — 2021-09-01
- 1.1.5 — 2021-05-18
- 1.1.3 — 2021-05-18
- 1.1.2 — 2021-05-07
- 1.0.5 — 2021-03-08
- 1.0.3 — 2021-03-08
- 1.0.2 — 2021-03-08
- 1.0.1 — 2021-03-05
- 1.0.0 — 2021-03-05

## README

# item-checked-custom

> ClassFunc item checked custom used antd and styled component

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

## New Release v1.1.8

```angular2html
- off hover change color
- fix number left size
- add props tooltips destroyTooltipOnHide={{ keepParent: false }}, reducer DOM element
- fix warning id
```

## Demo

https://duongdam.github.io/item-checked-custom/

## Install

```bash
npm install --save item-checked-custom

yarn add item-checked-custom
```

## Usage

```js
import React from "react";

import { ItemCheckedCustom } from "item-checked-custom";

const App = () => {
  const [checked, setChecked] = React.useState(true);

  const onClick = () => {
    setChecked(!checked);
  };

  return (
    <div style={{
      width: "100%",
      maxWidth: "500px",
      margin: "auto",
      marginTop: "100px",
      textAlign: "center"
    }}>

      Default
      <ItemCheckedCustom
        width={"250px"}
        checked={checked}
        onClick={onClick}
        margin={"10px"}
        id={1}
      />

      With border radius
      <ItemCheckedCustom
        name={"ClassFunc checked"}
        border={"1px"}
        borderRadius={"10px"}
        checked={checked}
        onClick={onClick}
        margin={"10px"}
        id={2}
      />

      With border radius text color
      <ItemCheckedCustom
        name={"ClassFunc checked"}
        border={"1px"}
        borderRadius={"10px"}
        checked={checked}
        onClick={onClick}
        margin={"10px"}
        isTextColor={true}
        id={3}
      />

      With change color
      <ItemCheckedCustom
        name={"ClassFunc checked"}
        border={"1px"}
        borderRadius={"10px"}
        color={"#690003"}
        borderColor={"#690003"}
        checked={checked}
        onClick={onClick}
        margin={"10px"}
        isTextColor={true}
        id={4}
      />

      With left number
      <ItemCheckedCustom
        border={"1px"}
        borderRadius={"10px"}
        checked={checked}
        onClick={onClick}
        margin={"10px"}
        isLeft={true}
        leftNumber={10}
        id={5}
      />

      Width revert
      <ItemCheckedCustom
        border={"1px"}
        margin={"10px"}
        checked={checked}
        onClick={onClick}
        isRevert={true}
        isLeft={true}
        leftNumber={10}
        id={6}
      />

      Width disable
      <ItemCheckedCustom
        border={"1px"}
        margin={"10px"}
        checked={checked}
        onClick={onClick}
        isRevert={true}
        disabled={true}
        id={7}
      />

      With off tooltip & disable
      <ItemCheckedCustom
        border={"1px"}
        margin={"10px"}
        checked={checked}
        onClick={onClick}
        isRevert={true}
        offTooltip={true}
        disabled={true}
        id={8}
      />
    </div>
  );

};

export default App;

```

## Props type:

```text
  id: PropType.oneOfType([PropType.string, PropType.number]),
  width: PropType.string,
  maxWidth: PropType.string,
  height: PropType.string,
  borderRadius: PropType.string,
  name: PropType.oneOfType([PropType.string, PropType.element, PropType.elementType]),
  color: PropType.string,
  borderColor: PropType.string,
  border: PropType.string,
  borderType: PropType.oneOf(["solid", "none", "dotted"]),
  callBack: PropType.func,
  isLeft: PropType.bool,
  leftNumber: PropType.number,
  checked: PropType.bool,
  isRevert: PropType.bool,
  disabled: PropType.bool,
  hiddenAvatar: PropType.bool,
  isTextColor: PropType.bool,
  isBold: PropType.bool,
  offTooltip: PropType.bool,
  tooltipPlacement: PropType.string,
  margin: PropType.string,
  padding: PropType.string,
  iconMargin: PropType.string
```

## Default props

```text
  id: uuidv4(),
  width: "100%",
  maxWidth: "350px",
  height: "40px",
  borderRadius: "0px",
  name: "ClassFunc checked",
  color: "#1790FF",
  borderColor: "#1790FF",
  border: null,
  borderType: "solid",
  callBack: null,
  isLeft: false,
  leftNumber: null,
  checked: false,
  isRevert: false,
  disabled: false,
  hiddenAvatar: false,
  isTextColor: false,
  isBold: false,
  offTooltip: false,
  tooltipPlacement: "top",
  margin: "5px",
  padding: "unset",
  iconMargin: "0px 3px"
```

## License

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

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