1.0.14 • Published 4 years ago
react-form-dynamic v1.0.14
Generate form from JSON
Declare fields
const fields = [
{
name: 'firstName',
label: 'First Name',
type: 'text',
validations: [
{
rule: 'required',
params: ['Required'],
}
],
},
{
name: 'email',
label: 'Email',
type: 'text',
validations: [
{
rule: 'required',
},
{
rule: 'email',
params: ['Incorrect email'],
},
],
},
{
name: 'password1',
label: 'Password',
type: 'password',
validations: [
{
rule: 'required',
},
{
rule: 'min',
params: [2, 'Too short'],
},
{
rule: 'max',
params: [8, 'Too Long'],
},
],
},
{
name: 'password2',
label: 'Password',
type: 'password',
validations: [
{
rule: 'fields-match',
params: ['password1', 'Do not much'],
},
],
},
{
name: 'state',
label: 'State',
type: 'select',
options: states.map(s => ({ value: s.abbr, label: s.name })),
validations: [
{
rule: 'required',
},
],
},
{
name: 'submit',
label: 'Submit',
type: 'element',
element: (<button>submit</button>),
},
];
Use hook
import { useGeneratedForm } from 'react-form-dynamic';
const App = () => {
const handleSubmit = () => {
console.log('Form submitted!');
};
const [formElements, formik] = useGeneratedForm(fields, handleSubmit);
return (
<form onSubmit={formik.handleSubmit}>
{formElements}
</form>
);
};
useForm hook
You can generate form manualy using useForm hook
import { useForm } from 'react-form-dynamic';
const fields = [
{
name: 'firstName',
label: 'First Name',
validations: [
{
rule: 'required',
params: ['Required'], // Error message will be "First Name is a required field"
}
],
},
{
name: 'lastName',
label: 'Last Name',
validations: [
{
rule: 'required',
params: ['Required', 'Last Name is strictly required'], // Custom error message
}
],
},
];
const App = () => {
const onSubmit = () => {
console.log('Form submitted!');
};
const formik = useForm({fields, onSubmit});
return (
<form onSubmit={formik.handleSubmit}>
<Input name="firstName" formik={formik}>
<Input name="lastName" formik={formik}>
</form>
);
};
fields structure
fields
Field | Description | |
---|---|---|
type | Type of the form element | select, text, number, email, element... |
name | Name of the element.Also used as a key | |
initialValue | Default value of the field | |
label | Label of the form element | |
validations | An array with the list of validations | |
element | React.element. Used when type is element | Ex. (<button>submit</button>) |
validation
Field | Description | |
---|---|---|
rule | Validation rule's name. Mostly using yup rules. | Possible values: required, min, max, fields-match... |
params | Param for rule. Can be custom error message. |