ellenox-checkbox

Provides ready to use Checkbox and CheckboxList in expo projects.

Installation

Supported version: react-native >= 0.59.0

npm install ellenox-checkbox

or

yarn add ellenox-checkbox

Example

Checkbox and CheckboxList

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

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.