https://github.com/ronny1020/react-form-maker
NPM React tool to make a React form by object
https://github.com/ronny1020/react-form-maker
form form-maker library npm react react-component
Last synced: 3 months ago
JSON representation
NPM React tool to make a React form by object
- Host: GitHub
- URL: https://github.com/ronny1020/react-form-maker
- Owner: ronny1020
- License: mit
- Created: 2020-05-26T09:40:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T02:16:25.000Z (about 2 years ago)
- Last Synced: 2025-08-09T14:28:15.962Z (11 months ago)
- Topics: form, form-maker, library, npm, react, react-component
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-form-maker
- Size: 2.91 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-form-maker
> make a react form faster by Object
[](https://www.npmjs.com/package/react-form-maker) [](https://standardjs.com)
## Why this?
In my opinion, It takes a lot of time on dealing with make pairs with `` & `` when creating a form setting the id & htmlFor.
Moreover, usually, the pairs would share the same className or style.
so, why not use a tool to deal with them.
And you still can set className, style and so on for any pairs.
## Install
```bash
npm i react-form-maker
```
## Usage
```jsx
import React from 'react'
import { ReactFormMaker, getReactFormData } from 'react-form-maker'
const formClassName = {
formGroupClassName: 'form-group',
labelClassName: '',
inputClassName: 'form-control'
}
const formItems = [
{ id: 'name', label: 'Name：', type: 'text', defaultValue: 'test' },
{ id: 'account' },
{ id: 'phone', type: 'number' },
{ id: 'birthday', type: 'date' },
{
type: 'radio',
name: 'framework',
radioClassName: 'form-check-input',
radioGroupClassName: 'form-check',
radioLabelClassName: 'form-check-label',
options: [
{ value: 'React', defaultChecked: true },
'Angular',
{ value: 'Vue', text: 'Vue.js' }
]
},
{
id: 'gender',
type: 'select',
formGroupClassName: 'form-group mb-5',
options: [{ value: 'male', text: 'Male' }, 'female']
},
'test1',
'test2',
{ type: 'div', className: 'm-5', child:
},
{
value: 'Submit',
type: 'submit',
className: 'btn btn-primary'
}
]
const App = () => {
return (
react-form-maker demo}
formItems={formItems}
formClassName={formClassName}
onSubmit={(event) => {
event.preventDefault()
const data = getReactFormData(formItems)
console.log(data)
}}
/>
)
}
export default App
```
## Demo
[Demo](https://ronny1020.github.io/react-form-maker/)
Bootstrap is used for demo, however, this module don't dependency on Bootstrap.
It's **NOT** necessary to use Bootstrap.
## Basic knowledge
for most of the `` & `` pair of formItem would be like:
```jsx
```
the div tag would be called "formGroup"
if you use button or submit, there would be no div of formGroup.
## Attributes
#### formClassName : Object
formGroupClassName: string (className of the formGroup)
labelClassName:string (className of the label)
inputClassName:string (className of the input)
#### formStyle : Object
formGroupStyle: Object (style of the formGroup)
labelStyle: Object (style of the label)
inputStyle: Object (style of the input)
Ps.The way to write the ClassName and style is the way you write in JSX
#### formItems : Array
For more detail, please read the next section.
#### header : JSX
Add any content before the formItems by JSX.
#### footer : JSX
Add any content after the formItems by JSX.
#### other attributes
Those Would be the attributes of ``
## formItems
For item in array of formItems, use type of object or string.
If it's a string, it would be equal to {id:'string'}
#### id : string
This is the id of the `` and the htmlFor of the ``
#### label : string
The text in the ``
The default is the defined "id"
#### formGroupClassName: string (className of the formGroup)
#### labelClassName:string (className of the label)
#### inputClassName:string (className of the input)
#### formGroupStyle: Object (style of the formGroup)
#### labelStyle: Object (style of the label)
#### inputStyle: Object (style of the input)
Ps.The way to write the ClassName and style is the way you write in JSX.
"className" or "style" in formItems have priority than in the formClassName or formStyle.
#### other attributes
Those Would be the attributes of ``
#### {type:select}
Use (options : array) to create list of ``.
In options use Object or string to create each ``, which contain key value & text.
If type of string is used, that would be equal to `{value:'string'}`
Key of 'text' would be the text in ``, the default is the defined "value"
#### {type:radio}
Use (options : array) to create list of following components.
If type of string is used, that would be equal to `{value:'string'}`.
```jsx
{text}
```
Like inputGroup, the outer `
` would be radioGroup.
Use property "radioGroupClassName" or "radioGroupStyle" to change the radioGroup style.
Use property "radioClassName" or "radioStyle" to change the radio style.
Use property "radioLabelClassName" or "radioLabelStyle" to change the label style.
##### The "options" property of {type:radio}
"text" property is the text of the label, the default is the defined "value".
Like inputGroup, "id" would be used to the id of input and the htmlFor of label, the default is also the defined "value" .
Other properties would be the attributes of input, such as "defaultChecked:true"
#### {type:button}
If you use button or submit, there would be no div of formGroup.
Simply use "className" or "style" to change the style.
#### {type:div}
Create `
` ,and anything could be insert into it by property "child".
Any other property would be the attributes of the div.
## getReactFormData(formItems)
This function could get the date of `` form.
The "formItems" should be the formItems used by ``.
The return is Object with key: value pair. If there is a name in formItem, the key would be the "name" property. Otherwise, the key would be the "id" property.
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## License
MIT © [ronny1020](https://github.com/ronny1020)