1.0.5 • Published 3 years ago

react-simple-checkboxlist v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

react-simple-checkboxlist

GitHub license

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={setFruits}
     selectoption={selectedfruits}
     handelchange={handelSelection} 
   />
  )
}

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

list of props

PropDescriptionTypeDefault
optionsoptions for checkbox list[{label, value}][]
selectoptionpre-selected option[{label, value}][]
handelchangeonChange callback e.g (selectedList, object, expresion)=>{ }function
optionlabeldisplay your own labelString'label'
optionvaluedisplay your own valueString'value'
containerClassclass name for parent componentString'container-box'
controlboxClassclass name for list item componentString'control-box'

License

MIT.

Copyright (c) 2022 Jeel Chheta