Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/efishery/json-reactform
Convert JSON schema into React component forms.
https://github.com/efishery/json-reactform
form generator json json-schema react-components reactjs
Last synced: 4 days ago
JSON representation
Convert JSON schema into React component forms.
- Host: GitHub
- URL: https://github.com/efishery/json-reactform
- Owner: eFishery
- Created: 2020-01-10T08:32:31.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T04:59:03.000Z (almost 2 years ago)
- Last Synced: 2024-09-18T01:12:13.695Z (about 2 months ago)
- Topics: form, generator, json, json-schema, react-components, reactjs
- Language: JavaScript
- Homepage:
- Size: 235 KB
- Stars: 10
- Watchers: 6
- Forks: 10
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/json-reactform)
# JSON-ReactForm
JSON React Form is library that convert JSON schema into React component forms.
## Supported form's types
- text
- number
- textarea
- date
- select
- checkbox
- radio
- currency
- submit button
## How To Use
Install this library using `npm i json-reactform` or `yarn add json-reactform`.
## JSON Schema
Then define JSON schema with format:
```
[label_name] : {
options
}
```
## Options
### Text, Number, Textarea --> `return string`
- **type**: text | number | textarea
- **required**: true | false
- **disabled**: true | false
- **defaultValue**: string
- **placeholder**: string
### Date --> `return ISO string`
We use react-datepicker for rendering input type date.
- **type**: date
- **required**: true | false
- **disabled**: true | false
- **defaultValue**: new Date()
> example: `new Date()` for today or more specific with a certain date and time `new Date("11 July 2020")`
- **format**: string
> example: `dd MM yyyy` or `MMMM dd, yyyy`.
>
> See react-datepicker custom format.
### Select --> `return string (value of selected)`
We use react-select for rendering input type select and its options. By default you can search option by typing in the field and you can clear the options by click on **x** button on the right side.
- **type**: select
- **required**: true | false
- **disabled**: true | false
- **defaultValue**: string
> It must be the exact same string that representing the option you wanna set as default options.
- **placeholder**: string
- **createable**: true | false
> Set to `true` if you want to add option on the fly. Simply by typing new options on the input field. The value you typed in will become the `label` of the new option object. You must provide the function to define your `value` based on that string within `onCreateOption` below.
- **onCreateOption**: callback
> The callback will receive string you've typed in the input field. Then you must return an object that at lest contain `label` and `value`. Example:
>
> ```js
> {
> onCreateOption: text => {
> const value = text.toLowerCase();
> return {
> label: text,
> value,
> };
> };
> }
> ```
- **options**: array
> The options is array of object that consists at least `label` and `value`. Label will be displayed in the select's options, while value is the one that will be returned later.
### Checkbox --> `return array of string`
- **type**: checkbox
- **required**: true | false
- **disabled**: true | false
- **defaultValue**: array of string
> It must be an array consisting the exact same string that representing the option you want to be set as checked by default.
- **options**: array
> The options is array of object that consists at least `label` and `value`. Label will be displayed in options, while value is the one that will be returned later.
### Radio --> `return string`
- **type**: radio
- **required**: true | false
- **disabled**: true | false
- **defaultValue**: string
> It must be the exact same string that representing the option you want to be set as checked by default.
- **options**: array
> The options is array of object that consists at least `label` and `value`. Label will be displayed in options, while value is the one that will be returned later.
### Submit
The key you provided to the model will become text inside this submit button.
- **type**: submit
- **disabled**: true | false
## Example
```
export default {
"Plan Date": {
"type": "date",
"format": "dd MMMM yyyy",
"required": true
},
"Qty": {
"type": "number",
"required": true
},
"Item Number": {
"type": "select",
"required": true
"options": [ //use static json arry to get options
{
"value": "1",
"label": "item 1"
},
{
"value": "2",
"label": "item 2"
}
],
},
"Parts": {
"type": "checkbox",
"required": true
"options": [ //use static json arry to get options
{
"value": "checkbox_item_1",
"label": "Checkbox 1"
},
{
"value": "checkbox_item_2",
"label": "Checkbox 2"
}
],
},
"Status": {
"type": "radio",
"required": true,
"options": [ //use static json arry to get options
{
"value": "completed",
"label": "Completed"
},
{
"value": "not_completed",
"label": "Not Completed"
}
],
},
"Save": { // button submit
"type": "submit",
}
}
```
Don't forget to include css bootstrap into your project.
```
import 'bootstrap/dist/css/bootstrap.min.css';
```
Within the component you want to add the form, import `JsonToForm` from library and your schema, make your submit function inside your component.
```
import JsonToForm from 'json-reactform';
import model from '../your/schema';
const YourComponent = () => {
// Do anything within submit function.
const submit = (params) => {
console.log(params);
}
return (
)
}
```
## peerDependecies
Make sure you have these npm libraries installed within your project.
- react
## Contributor
- [Aji Agahari](https://github.com/ajiagahari)
- [Nasrul Faizin](https://github.com/nasrul21)
- [Yuhanas Yulianto](https://github.com/yuhanasy)
## Credits
[reactjs](https://reactjs.org/)
[reactstrap](https://reactstrap.github.io/)
[axios](https://github.com/axios/axios)
[react-datepicker](https://github.com/Hacker0x01/react-datepicker)
[react-select](https://react-select.com/)
## License
MIT