{"id":28471689,"url":"https://github.com/larvenllc/react-cloner","last_synced_at":"2026-05-09T10:02:33.554Z","repository":{"id":120063778,"uuid":"307674567","full_name":"LarvenLLC/react-cloner","owner":"LarvenLLC","description":"Add/Remove Form Fields or other Components Dynamically","archived":false,"fork":false,"pushed_at":"2024-02-19T18:38:26.000Z","size":3631,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-07T11:08:29.380Z","etag":null,"topics":["clone","cloner","npm","react","react-clone","react-cloner","reactjs"],"latest_commit_sha":null,"homepage":"https://larvenllc.github.io/react-cloner","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LarvenLLC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-27T11:12:40.000Z","updated_at":"2024-01-12T11:35:18.000Z","dependencies_parsed_at":"2024-01-12T15:37:02.920Z","dependency_job_id":"8d10aa6e-2505-49d2-aabb-2fa1447644c7","html_url":"https://github.com/LarvenLLC/react-cloner","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"a035ed58460e38e4755f82cd5c9c4f0fb7fc3a7a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LarvenLLC/react-cloner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LarvenLLC%2Freact-cloner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LarvenLLC%2Freact-cloner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LarvenLLC%2Freact-cloner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LarvenLLC%2Freact-cloner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LarvenLLC","download_url":"https://codeload.github.com/LarvenLLC/react-cloner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LarvenLLC%2Freact-cloner/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263046171,"owners_count":23405146,"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":["clone","cloner","npm","react","react-clone","react-cloner","reactjs"],"created_at":"2025-06-07T11:08:32.831Z","updated_at":"2026-05-09T10:02:33.542Z","avatar_url":"https://github.com/LarvenLLC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-cloner\n\n\u003e Add/Remove Form Fields or other Components Dynamically\n\n[![NPM](https://img.shields.io/npm/v/react-cloner.svg)](https://www.npmjs.com/package/react-cloner) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Demo\n\n![React Cloner Demo](/example/public/react-cloner.gif)\n\n## Install\n\n```bash\nnpm install --save react-cloner\n```\n\nOR\n\n```bash\nyarn add react-cloner\n```\n\n## Usage\n\n```jsx\nimport Cloner from 'react-cloner'\n\nexport default function ContactPeopleForm() {\n  function handleSubmit(event) {\n    event.preventDefault()\n    let form = {},\n      formData = new FormData(event.target)\n    for (let pair of formData.entries()) {\n      let key = pair[0],\n        value = pair[1]\n      form[key] = value\n    }\n    alert(JSON.stringify(form, 0, 2))\n  }\n  return (\n    \u003cdiv className='col py-3'\u003e\n      \u003cform onSubmit={handleSubmit}\u003e\n        \u003cCloner\n          title='Contact Person'\n          addButtonClassName='btn btn-outline-primary'\n          deleteButtonClassName='btn btn-outline-danger'\n          deleteButtonWrapperClassName='form-group'\n          component={\u003cContactPerson /\u003e}\n          componentWrapperClassName='d-flex w-100 align-items-end justify-content-between mb-3'\n        /\u003e\n        \u003cbutton type='submit' className='btn btn-primary'\u003e\n          Submit\n        \u003c/button\u003e\n      \u003c/form\u003e\n    \u003c/div\u003e\n  )\n}\n\n// increment prop is passed onto the Cloner component by default\n// it counts the number of the cloned component from 1 onwards\nfunction ContactPerson({ increment }) {\n  return (\n    \u003cdiv className='row w-100 mx-auto'\u003e\n      \u003cdiv className='pl-0 col col-12 col-md-4 form-group'\u003e\n        \u003clabel\u003eName\u003c/label\u003e\n        \u003cinput\n          name={`contact-person-name-${increment}`}\n          className='form-control'\n        /\u003e\n      \u003c/div\u003e\n      \u003cdiv className='px-0 col col-12 col-md-5 form-group'\u003e\n        \u003clabel\u003eEmail\u003c/label\u003e\n        \u003cinput\n          name={`contact-person-email-${increment}`}\n          className='form-control'\n        /\u003e\n      \u003c/div\u003e\n      \u003cdiv\n        className={`${\n          increment === 1 ? 'pr-0' : ''\n        } col col-12 col-md-3 form-group`}\n      \u003e\n        \u003clabel\u003ePhone\u003c/label\u003e\n        \u003cinput\n          name={`contact-person-phone-${increment}`}\n          className='form-control'\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Props\n\n| Prop                         |                         Explanation                          | Data Type |                                                          (Sample) Values                                                           | Default |\n| ---------------------------- | :----------------------------------------------------------: | :-------: | :--------------------------------------------------------------------------------------------------------------------------------: | :-----: |\n| title                        |           semantic name of component to be cloned            |  String   |                                                `Contact Person`\u003cbr/\u003e`Referral`\u003cbr/\u003e                                                | `null`  |\n| initialItems                 |   number of times component specified to appear initially    |  Number   |                                                            `5`\u003cbr/\u003e`2`                                                             |   `1`   |\n| component                    |                 react component to be cloned                 |   React   | `const Example = () =\u003e { return \u003cdiv/\u003e }`\u003cbr/\u003e`class Example extends Component { render(){ return(\u003cdiv/\u003e) }} =\u003e { return \u003cdiv/\u003e }` | `null`  |\n| onDelete                     |           callback on each cloned component delete           |   Func    |                                                   `(index) =\u003e console.log(\"deleted %s\", index)`                                                   | `null`  |\n| shouldHideLabel              |                 hide cloned component label?                 |   Bool    |                                                         `true`\u003cbr/\u003e`false`                                                         | `true`  |\n| addButtonPosition            |              horizontal alignment of add button              |  String   |                                                         `left`\u003cbr/\u003e`right`                                                         | `right` |\n| componentWrapperStyle        |                 Cloner parent wrapper style                  |  Object   |                                                   `{}`\u003cbr/\u003e`{background: \"red\"}`                                                   | `null`  |\n| componentWrapperClassName    |                 Cloner parent wrapper class                  |  String   |                                                      `margin-auto`\u003cbr/\u003e`py-3`                                                      | `null`  |\n| labelClassName               |                 cloned component label class                 |  String   |                                                            `text-muted`                                                            | `null`  |\n| addButtonClassName           |                 add (component) button class                 |  String   |                                                     `btn`\u003cbr/\u003e`button-primary`                                                     |  `\"\"`   |\n| deleteButtonClassName        |             cloned component delete button class             |  String   |                                                      `btn-danger`\u003cbr/\u003e`b-red`                                                      | `null`  |\n| deleteButtonWrapperClassName |     cloned component delete button parent wrapper class      |  String   |                                                       `d-inline`\u003cbr/\u003e`py-3`                                                        | `null`  |\n| shouldRemoveDeleteWrapper    | whether to remove the wrapper component around delete button |   Bool    |                                                         `true`\u003cbr/\u003e`false`                                                         | `false` |\n\n## License\n\nMIT © [BossBele](https://github.com/BossBele)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flarvenllc%2Freact-cloner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flarvenllc%2Freact-cloner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flarvenllc%2Freact-cloner/lists"}