https://github.com/devmozao/dynamic-checkbox-group-with-react-and-antd
How to create a dinamic checkbox group with React and Ant Design CSS Library
https://github.com/devmozao/dynamic-checkbox-group-with-react-and-antd
ant-design front react reactjs
Last synced: 8 months ago
JSON representation
How to create a dinamic checkbox group with React and Ant Design CSS Library
- Host: GitHub
- URL: https://github.com/devmozao/dynamic-checkbox-group-with-react-and-antd
- Owner: devMozao
- License: gpl-3.0
- Created: 2020-03-05T03:04:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T09:06:38.000Z (over 3 years ago)
- Last Synced: 2023-03-08T01:29:18.976Z (over 3 years ago)
- Topics: ant-design, front, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 1.28 MB
- Stars: 7
- Watchers: 0
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Motivation
TL/DR: I needed to componentize this kind of behavior in a project, but antd itself doesn't have a decent preset with vertical list, so I created my own version-look-alike of their lib, using the some default components like Row/Cow/Checkbox and Checkbox.Group.
Also, this project structure was taken in mind to place two find fields/debouncer in each picklist, so each time you search on the box, the container updates the value of the component. The finder box isn't here yet, but I think I'll add later on, too.
Also: there's some comments there, explaining how things works. You should be fine.
That's it. Any doubts, contact me on Twitter/LinkedIn. o/
# How to
### To start the project, do the following
clone the repo: `git clone https://github.com/devMozao/dynamic-checkbox-group-with-react-and-antd.git`
navigate to the folder: ` cd dynamic-checkbox-group-with-react-and-antd`
install the project dependencies with: `yarn` or `npm install` (yarn is recommended)
and then, just run the project with the start script: `yarn start` or `npm run start`
If you open the console on the broser, you will see the logs from the values that are currently showing and being selected.
### If you want to see the content of the code
go to
`src/App.js`
there, you will find the container import, located at
`src/containers/example.js`
from the container, you'll see the import to the component located at
`src/ccomponents/customCheckboxGroup/CustomCheckboxGroup.js`
This is where all the magic happens between container and component ;)
# About
author: Diogo "Mozão" Fonseca
twitter/linkedin: @devmozao
# License
Feel free to fork, improve or contribute.For license details, check the LICENSE.md file.