@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;