@wilkins-software/json-form v0.12.2
@wilkins-software/json-form
@wilkins-software/json-form is a TypeScript library for React that provides an easy-to-use JSONForm component. This component allows you to define a form structure using a JSON object, and renders a fully functional React form based on the provided definition. With this library, you can quickly create complex and dynamic forms without writing repetitive form code.
Features
- Easy form definition using JSON objects
- Supports various input types (text, number, email, password, etc.)
- Dynamic form rendering based on the JSON definition
- Built with TypeScript for better type safety and autocomplete
- Compatible with React functional components and hooks
- Fully customizable with support for custom components and styles
- Installation
- To install @wilkins-software/json-form, run the following command:
npm install @wilkins-software/json-form
Usage
To use the JSONForm component, simply import it and provide a JSON object as the definition prop. The JSON object should follow the structure specified in the Form Definition section.
Here's a basic example:
import React from 'react';
import JSONForm from '@wilkins-software/json-form';
const formDefinition = {
"title": "Registration Form",
"fields": [
{
"type": "text",
"label": "Username",
"name": "username",
"required": true
},
{
"type": "email",
"label": "Email",
"name": "email",
"required": true
},
{
"type": "password",
"label": "Password",
"name": "password",
"required": true
},
{
"type": "submit",
"label": "Register"
}
]
};
const App = () => {
const handleSubmit = (formData) => {
console.log("Form data:", formData);
};
return (
<div>
<h1>Example Registration Form</h1>
<JSONForm definition={formDefinition} onSubmit={handleSubmit} />
</div>
);
};
export default App;
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
2 years ago