react-metaforms v5.3.30
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"
}
}
7 months ago
9 months ago
9 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago