ellenox-checkbox v1.0.9

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

CheckboxList Props

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.