<h1>@evlop/react-schema-form</h1>
npm install @evlop/react-schema-formThis project provides a form builder for React that allows you to convert a JSON schema into a form. The form builder uses the JSON schema to automatically generate form fields and validation rules, making it easy to create forms with minimal code.
To use the form builder in your React project, you'll need to install it as a dependency:
``npm install @evlop/react-schema-form`
To use the form builder, you'll first need to create a JSON schema that defines the fields and validation rules for your form. Once you have your schema, you can use the FormBuilder component to convert it into a form:
`
import React from 'react';
import FormBuilder from '@evlop/react-schema-form';
const schema = {
fields: [
{
name: 'name',
label: 'Name',
type: 'text',
required: true
},
{
name: 'email',
label: 'Email',
type: 'email',
required: true
},
{
name: 'age',
label: 'Age',
type: 'number',
required: true
}
]
};
function MyForm() {
return (
);
}
export default MyForm;
`
You can also pass a handleSubmit function to the FormBuilder component, which will be called when the form is submitted:
`
function handleSubmit(values) {
console.log(values);
}
function MyForm() {
return (
);
}
`
The form builder uses the fields array in the JSON schema to generate form fields. Each field object in the array should have the following properties:
name: The name of the field.label: The label for the field.type: The type of the field. Supported types are "text", "email", "number", "password", "checkbox", "radio", "select", "textarea"required: Whether the field is required.You can also pass custom props and validations to the form fields.
The form builder uses the validation rules specified in the JSON schema to validate the form fields. By default, it supports the following validation rules:
required: The field is required.minLength: The field must have at least a certain number of characters.maxLength: The field must have at most a certain number of characters.pattern: The field must match a certain regular expression.You can also pass custom validation functions to the form fields.
You can customize the error messages that are displayed when validation fails by passing a messages object to the FormBuilder component. The messages object should have the same structure as the schema, with a messages property for each field that has validation rules.
`
const messages = {
name: {
required: "Name is required"
}
};
function MyForm() {
return (
);
}
``