https://github.com/larvenllc/react-cloner
Add/Remove Form Fields or other Components Dynamically
https://github.com/larvenllc/react-cloner
clone cloner npm react react-clone react-cloner reactjs
Last synced: about 2 months ago
JSON representation
Add/Remove Form Fields or other Components Dynamically
- Host: GitHub
- URL: https://github.com/larvenllc/react-cloner
- Owner: LarvenLLC
- Created: 2020-10-27T11:12:40.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-02-19T18:38:26.000Z (over 2 years ago)
- Last Synced: 2025-06-07T11:08:29.380Z (about 1 year ago)
- Topics: clone, cloner, npm, react, react-clone, react-cloner, reactjs
- Language: JavaScript
- Homepage: https://larvenllc.github.io/react-cloner
- Size: 3.46 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-cloner
> Add/Remove Form Fields or other Components Dynamically
[](https://www.npmjs.com/package/react-cloner) [](https://standardjs.com)
## Demo
## Install
```bash
npm install --save react-cloner
```
OR
```bash
yarn add react-cloner
```
## Usage
```jsx
import Cloner from 'react-cloner'
export default function ContactPeopleForm() {
function handleSubmit(event) {
event.preventDefault()
let form = {},
formData = new FormData(event.target)
for (let pair of formData.entries()) {
let key = pair[0],
value = pair[1]
form[key] = value
}
alert(JSON.stringify(form, 0, 2))
}
return (
}
componentWrapperClassName='d-flex w-100 align-items-end justify-content-between mb-3'
/>
Submit
)
}
// increment prop is passed onto the Cloner component by default
// it counts the number of the cloned component from 1 onwards
function ContactPerson({ increment }) {
return (
Name
Email
Phone
)
}
```
## Props
| Prop | Explanation | Data Type | (Sample) Values | Default |
| ---------------------------- | :----------------------------------------------------------: | :-------: | :--------------------------------------------------------------------------------------------------------------------------------: | :-----: |
| title | semantic name of component to be cloned | String | `Contact Person`
`Referral`
| `null` |
| initialItems | number of times component specified to appear initially | Number | `5`
`2` | `1` |
| component | react component to be cloned | React | `const Example = () => { return
}`
`class Example extends Component { render(){ return() }} => { return }` | `null` |
| onDelete | callback on each cloned component delete | Func | `(index) => console.log("deleted %s", index)` | `null` |
| shouldHideLabel | hide cloned component label? | Bool | `true`
`false` | `true` |
| addButtonPosition | horizontal alignment of add button | String | `left`
`right` | `right` |
| componentWrapperStyle | Cloner parent wrapper style | Object | `{}`
`{background: "red"}` | `null` |
| componentWrapperClassName | Cloner parent wrapper class | String | `margin-auto`
`py-3` | `null` |
| labelClassName | cloned component label class | String | `text-muted` | `null` |
| addButtonClassName | add (component) button class | String | `btn`
`button-primary` | `""` |
| deleteButtonClassName | cloned component delete button class | String | `btn-danger`
`b-red` | `null` |
| deleteButtonWrapperClassName | cloned component delete button parent wrapper class | String | `d-inline`
`py-3` | `null` |
| shouldRemoveDeleteWrapper | whether to remove the wrapper component around delete button | Bool | `true`
`false` | `false` |
## License
MIT © [BossBele](https://github.com/BossBele)