react-metaforms
v5.3.30
Published
![Node.js CI](https://github.com/flsy/react-metaforms/workflows/Node.js%20CI/badge.svg?branch=master)
Downloads
180
Readme
React-Metaforms
There is a nice how to use tutorial.
Basic Usage
import Form, { IForm } from 'react-metaforms';
// This could be loaded from server
const loginForm = {
username: {
type: "text",
label: "Username"
},
submit: {
"type": "submit",
"label": "Submit"
}
};
// Store form's changes localy
const [form, setForm] = React.useState<IForm>(loginForm);
// Render it
<Form
form={form}
onFormChange={setForm}
onSubmit={(submittedForm, { username }) => {
console.log('username:', username);
}}
components={({ name, component, actions }) => {
switch (component.type) {
case 'text':
return <TextInput name={name} {...component} {...actions} />
case 'submit':
return <button type="submit">{component.label}</button>
}
}}
/>
Properties
- form - array of objects rendered by metaform.
- onFormChange
- onSubmit - Function called after submitting form. Returns same structure as provided into
fields
property and adds value to each field.
Sample Fields
{
"username": {
"label": "Username",
"type": "text",
"value": "field value",
"disabled": false,
"placeholder": "",
"errorMessage": "",
"validation": [
{
"type": "required",
"message": "Please choose a username"
}
]
},
"submit": {
"label": "Save",
"type": "submit"
}
}