Code Monkey home page Code Monkey logo

react-multi-select-checkbox's Introduction

Multiple checkbox handling by React JS

React is most popular front end development framework. For our application development purpose we have build different complex web component to fullfill business requirment. Multiple checkbox selection is important UI feature for standard front end development. Today i have provide you some example about multiple checkbox selection with react js using the state of react js.

Installation and Prerequisites

  1. You need to Install create-react-app package globally by this command npm install -g create-react-app (npm command).
  2. Download or Clone the Project from https://github.com/tariqulislam/react-multi-select-checkbox.git.
  3. Run command on terminal or cmd npm install or yarn install.
  4. Then Run command npm start or yarn start

Available functions to access Parent and Chield Checkbox Component

  1. To Access Parent Checkbox Component onChange event, example code
filehandleAllChecked = (event) => {
   let fruites = this.state.fruites
   fruites.forEach(fruite => fruite.isChecked = event.target.checked)
   this.setState({fruites: fruites})
}
  1. To Access Chield Checkbox Component onChange event, example code
handleCheckChieldElement = (event) => {
   let fruites = this.state.fruites
   fruites.forEach(fruite => {
     if (fruite.value === event.target.value)
       fruite.isChecked =  event.target.checked
     })
   this.setState({fruites: fruites})
}

Licences

All the Code and information of this repository free to access. This will be licence under MIT. User can modified it and share it and if he/she want to contribute it, Feel to free to contribue.

react-multi-select-checkbox's People

Contributors

tariqulislam avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-multi-select-checkbox's Issues

onChange Issue

Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.
in input (at CheckBox.js:6)
in li (at CheckBox.js:5)
in CheckBox (at App.js:41)
in ul (at App.js:38)
in div (at App.js:35)
in App (at src/index.js:7)

Checkbox Export

Not a big issue just letting you know that you have the word "export" twice on your Checkbox.js component. export const... and then at the bottom export default

Unique Key Issue

Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of App. See https://fb.me/react-warning-keys for more information.
in CheckBox (at App.js:41)
in App (at src/index.js:7)

Not able to customize css for the Dropdown, Blanket components

I am using this library for rendering checkbox drop-downs. There are some issues in existing css styles.
Like z-index and other styles for the dropdown.

I want to customize the styles for this reason but not able to find any way to do it.

How to customize styles of react-multiselect-checkboxes

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.