{"id":16497498,"url":"https://github.com/devmozao/dynamic-checkbox-group-with-react-and-antd","last_synced_at":"2025-10-28T00:30:23.097Z","repository":{"id":39207645,"uuid":"245056125","full_name":"devMozao/dynamic-checkbox-group-with-react-and-antd","owner":"devMozao","description":"How to create a dinamic checkbox group with React and Ant Design CSS Library","archived":false,"fork":false,"pushed_at":"2023-01-05T09:06:38.000Z","size":1346,"stargazers_count":7,"open_issues_count":7,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2023-03-08T01:29:18.976Z","etag":null,"topics":["ant-design","front","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devMozao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-05T03:04:36.000Z","updated_at":"2022-05-06T17:55:33.000Z","dependencies_parsed_at":"2023-02-03T22:02:11.626Z","dependency_job_id":null,"html_url":"https://github.com/devMozao/dynamic-checkbox-group-with-react-and-antd","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devMozao%2Fdynamic-checkbox-group-with-react-and-antd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devMozao%2Fdynamic-checkbox-group-with-react-and-antd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devMozao%2Fdynamic-checkbox-group-with-react-and-antd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devMozao%2Fdynamic-checkbox-group-with-react-and-antd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devMozao","download_url":"https://codeload.github.com/devMozao/dynamic-checkbox-group-with-react-and-antd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219860464,"owners_count":16556017,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","front","react","reactjs"],"created_at":"2024-10-11T14:44:31.423Z","updated_at":"2025-10-28T00:30:22.710Z","avatar_url":"https://github.com/devMozao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"A printscreen tha proofs that it works\" src=\"./screenshots/proof-of-work.png\"\u003e\n\u003c/p\u003e\n\n# Motivation\nTL/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.\n\nAlso, 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.\n\nAlso: there's some comments there, explaining how things works. You should be fine.\n\nThat's it. Any doubts, contact me on Twitter/LinkedIn. o/\n\n# How to\n\n### To start the project, do the following\n\nclone the repo: `git clone https://github.com/devMozao/dynamic-checkbox-group-with-react-and-antd.git`\n\nnavigate to the folder: ` cd dynamic-checkbox-group-with-react-and-antd`\n\ninstall the project dependencies with: `yarn` or `npm install` (yarn is recommended)\n\nand then, just run the project with the start script: `yarn start` or `npm run start`\n\nIf you open the console on the broser, you will see the logs from the values that are currently showing and being selected.\n\n\n### If you want to see the content of the code\n\ngo to\n\n `src/App.js`\n\nthere, you will find the container import, located at \n\n`src/containers/example.js`\n\nfrom the container, you'll see the import to the component located at \n\n`src/ccomponents/customCheckboxGroup/CustomCheckboxGroup.js` \n\nThis is where all the magic happens between container and component ;)\n\n# About\n\nauthor: Diogo \"Mozão\" Fonseca\n\ntwitter/linkedin: @devmozao\n\n# License\n\nFeel free to fork, improve or contribute.For license details, check the LICENSE.md file.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmozao%2Fdynamic-checkbox-group-with-react-and-antd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevmozao%2Fdynamic-checkbox-group-with-react-and-antd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmozao%2Fdynamic-checkbox-group-with-react-and-antd/lists"}