JsonForm React Package
A versatile and robust JavaScript form builder designed for dynamic form generation through JSON schema. Optimized for React JSON schema form builders, Angular form builders, and seamlessly integrates with design frameworks like Bootstrap and MUI. Ideal for creating professional surveys, user input forms, and more. Streamline your development process with this highly adaptable and efficient npm package.
Features
- Dynamic Form Generation: Effortlessly generate comprehensive forms based on JSON schema specifications.
- Customizable Components: Seamlessly tailor input types, labels, and form elements to meet specific requirements.
- Responsive Layouts: Automatically adapts to varying column configurations, ensuring a seamless user experience across devices.
- Advanced Validation Support: Incorporate custom validation rules to ensure data accuracy and compliance.
- Simplified Submission Handling: Streamline form submission processes for improved efficiency.
Installation
To install this package, use npm or yarn:
npm install json-formkit
or
yarn add json-formkit
Usage
To use this package, simply import the JsonForm
component and provide a schema definition:
import React from "react";
import { JsonForm } from "json-formkit";
const schema = {
fields: [
{
field: "input",
label: "Name",
name: "name",
props: { type: "text" },
required: true,
validation: (value) => (!value ? "Name is required" : ""),
},
{
field: "select",
label: "Country",
name: "country",
options: [
{ label: "India", value: "india" },
{ label: "USA", value: "usa" },
],
},
{
field: "submit",
label: "Submit",
props: { type: "submit" },
},
],
};
function App() {
const handleSubmit = (data) => {
console.log("Form Data:", data);
};
return <JsonForm schema={schema} onSubmit={handleSubmit} />;
}
export default App;
Schema Structure
The schema consists of a column
value that defines the number of columns in the form and a fields
array where each field is defined with the following properties:
field
: Specifies the type of input, such as input
, select
, radio
, etc.
label
: The label to be displayed next to the field.
name
: The name of the field.
props
: Additional properties to customize the field (e.g., type
, placeholder
).
blockProps
: Additional properties to customize the div (e.g., style
).
labelProps
: Additional properties to customize the label (e.g., style
).
options
: For fields like select
or radio
, you can define options with label
and value
.
required
: A boolean indicating if the field is required.
validation
: A custom validation function that takes the field value and returns an error message if the validation fails.
Example Schema
const schema = {
fields: [
{
field: "input",
label: "Name",
name: "name",
props: { type: "text" },
required: true,
validation: (value) => (!value ? "Name is required" : ""),
},
{
field: "radio",
label: "Gender",
name: "gender",
type: "radio",
options: [
{ label: "Male", value: "male" },
{ label: "Female", value: "female" },
],
},
{
field: "submit",
label: "Submit",
props: { type: "submit" },
},
],
};
Validation
You can add custom validation for any field. The validation function is provided in the validation
property of the field. It accepts the field value as a parameter and should return an error message if the validation fails.
Example:
{
field: "input",
label: "Email",
name: "email",
props: { type: "email" },
required: true,
validation: (value) => (!value || !/\S+@\S+\.\S+/.test(value) ? "Invalid email" : ""),
}
Styling
You can also use MUI
's ThemeProvider
to customize the theme as needed.
import { ThemeProvider } from "@mui/material";
import { theme } from "***";
return (
<ThemeProvider theme={defaultTheme}>
<JsonForm schema={schema} onSubmit={handleSubmit} />
</ThemeProvider>
);
Storybook
Check out our Storybook to see a live demo of the component in action, including various form configurations and usage examples. It's a great way to interact with the package and explore its potential.
You can view the Storybook at: click here
Contributing
We welcome contributions to improve this package. Please fork the repository and submit a pull request with your changes.
License
This package is licensed under the MIT License. See the LICENSE file for more details.