react-simple-checkboxlist

A bootstrap-style react component for checkbox list

This is a simple react component that takes a meta data, translates it into a checkbox list and provides selected values when user changes selection and user can change there key and value of meta modal using hook api and can change css styles etc...

Install

npm install react-simple-checkboxlist

Usage

import React, { useState,useEffect } from 'react'
import CheckboxList from 'react-simple-checkboxlist'

const data = [
        {value: 'apple', label: 'Apple'},
        {value: 'orange', label: 'Orange'},
        {value: 'banana', label: 'Banana'} 
    ];

const Demo = () => {

  const [fruits, setFruits] = useState([])
  const [selectedfruits, setSelectionFruits] = useState([])

  useEffect(() => {
   setFruits(data)
  }, [])

  const handelSelection = (selectedfruits) => {
        setSelectionFruits(selectedfruits)
  }

  return (
   <CheckboxList 
    options={fruits}
    selectoption={selectedfruits}
    handlechange={handelSelection}
    optionlabel={row => row.label}
    optionvalue={row => row.value}
    filterHidden={true}
   />
  )
}

ReactDOM.render(<Demo />, document.body)

list of props

| Prop | Description | Type | Default | | ----------------- | -------------------------------------------------------------- | ------------------ | ----------------- | | options | options for checkbox list | [{label, value}] | [] | | selectoption | pre-selected option | [{label, value}] | [] | | handlechange | onChange callback e.g (selectedList, object, expresion)=>{ } | function | | | optionlabel | display your own label | function | 'label' | | optionvalue | display your own value | function | 'value' | | controlboxClass | class name for parent component | String | '-' | | containerClass | class name for list component | String | 'container-checkbox' | | inputsearchClass | class name for search input component | String | 'search' | | checkboxColor | color for checkbox | String | '#506EEC' | | filter | enabled to search search box | Bool | 'true' | | filterhidden | enabled to search all object key or only deisplay label | Bool | 'false' | | placeholder | search box place holder | String | 'Search...' | | filterdigit | searching start after enter number of digits | Number | 2 |

License

MIT.

Copyright (c) 2022 Jeel Chheta