# ellenox-checkbox

> This is ellenox customized checkbox.

Latest version **1.0.9** (published 2022-11-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install ellenox-checkbox
pnpm add ellenox-checkbox
yarn add ellenox-checkbox
bun add ellenox-checkbox
```

## 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.9 |
| Published | 2022-11-16 |
| First published | 2022-11-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | reetika |
| Maintainers | reetika_chandrakar |

## Links

- npm: https://www.npmjs.com/package/ellenox-checkbox
- npm.io page: https://npm.io/package/ellenox-checkbox

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [expo-checkbox](https://npm.io/package/expo-checkbox.md) ^2.2.0

## Recent versions

- 1.0.9 (latest) — 2022-11-16
- 1.0.8 — 2022-11-04
- 1.0.7 — 2022-11-04
- 1.0.6 — 2022-11-04
- 1.0.5 — 2022-11-02
- 1.0.4 — 2022-11-02
- 1.0.3 — 2022-11-02
- 1.0.2 — 2022-11-02
- 1.0.1 — 2022-11-02
- 1.0.0 — 2022-11-02

## README

# ellenox-checkbox

Provides ready to use Checkbox and CheckboxList in expo projects.

## Installation

Supported version: react-native >= 0.59.0

```bash
npm install ellenox-checkbox
```

or

```bash
yarn add ellenox-checkbox
```

## Example

#### Checkbox and CheckboxList

```jsx
import { Checkbox, CheckboxList } from "ellenox-checkbox";

....

<Checkbox
  itemContainerStyle={{
    justifyContent: "space-between",
    padding: 20,
    marginTop: 50,
  }}
  label={"Checkbox Label"}
  labelStyle={{ fontSize: 20 }}
  isChecked={true}
  onValueChange={()=>console.log("Value changed")}
  checkboxColor={"blue"}
  isLabelOnRight={true}
/>

<CheckboxList
  data={data}
  isLabelOnRight={true}
  onItemPress={()=>console.log("handle item selection")}
/>

```

#### Using Checkbox and CheckboxList

```jsx

import { Checkbox, CheckboxList } from "ellenox-checkbox";
....


const App = () => {
  const [checked, onChange] = useState(false);
  const [data, setData] = useState(Books);

  const onCheckMarkPress = () => {
    onChange(!checked);
  };

  const onItemPress = (item) => {
    const tempData = data.map((listItem) => {
      if (item.id === listItem.id) {
        return {
          ...listItem,
          selected: !listItem.selected,
        };
      }
      return listItem;
    });
    setData(tempData);
  };

  return (
    <View>
      <Checkbox
        itemContainerStyle={{
          justifyContent: "space-between",
          padding: 20,
          marginTop: 50,
        }}
        label={"Checkbox Label"}
        labelStyle={{ fontSize: 20 }}
        isChecked={checked}
        onValueChange={onCheckMarkPress}
        checkboxColor={"blue"}
        isLabelOnRight={true}
      />
      <CheckboxList
        data={data}
        isLabelOnRight={true}
        onItemPress={onItemPress}
      />
    </View>
  );
};


```

## Props

## Checkbox Props

|        Prop        | Description                         |   Type    | Default Value | Required |
| :----------------: | :---------------------------------- | :-------: | :-----------: | :------: |
|       label        | title of checkbox                   |  String   |               |   true   |
|     labelStyle     | custom style for checkbox           | ViewStyle |               |  false   |
|   checkboxColor    | checkbox color                      |  String   |               |  false   |
|     isChecked      | to store boolean value              |  Boolean  |               |   true   |
|   onValueChange    | callback on value change            | Function  |   undefined   |   true   |
| itemContainerStyle | custom style for checkbox container | ViewStyle |   undefined   |  false   |
|      disabled      | enable or disable checkbox          |  Boolean  |   undefined   |  false   |
|   isLabelOnRight   | shift the content to right          |  Boolean  |               |  false   |

## CheckboxList Props

|        Prop        | Description                         |   Type    | Default Value | Required |
| :----------------: | :---------------------------------- | :-------: | :-----------: | :------: |
|     labelStyle     | custom style for checkbox           | ViewStyle |               |  false   |
|   checkboxColor    | checkbox color                      |  String   |               |  false   |
| itemContainerStyle | custom style for checkbox container | ViewStyle |   undefined   |  false   |
|      disabled      | enable or disable checkbox          |  Boolean  |   undefined   |  false   |
|   isLabelOnRight   | shift the content to right          |  Boolean  |               |  false   |
|        data        | array of data                       |   Array   |               |   true   |
|    onItemPress     | callback on item selection          | Function  |               |   true   |
|   containerStyle   | custom style for checkbox list      | ViewStyle |               |  false   |

## Note

list must contain id, title, selected

## List Example

export const Books = [
{
id: "1",
title: "Beginning Android Programming",
author: "J.F DiMarzio",
selected: false,
...,
},

{
id: "2",
title: "ES6 & Beyound",
author: "Kyle Simpson",
selected: false,
...,
},

];

## License

This project is licensed under the ISC License.

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