0.12.2 • Published 2 years ago

@wilkins-software/json-form v0.12.2

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

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

2 years ago

0.7.5

2 years ago

0.7.7

2 years ago

0.11.0

2 years ago

0.12.0

2 years ago

0.11.1

2 years ago

0.12.1

2 years ago

0.11.2

2 years ago

0.12.2

2 years ago

0.10.0

2 years ago

0.9.0

2 years ago

0.8.1

2 years ago

0.8.0

2 years ago

0.7.2

2 years ago

0.7.1

2 years ago

0.5.3

2 years ago

0.7.3

2 years ago

0.5.0

2 years ago

0.4.1

2 years ago

0.7.0

2 years ago

0.5.2

2 years ago

0.5.1

2 years ago

0.4.0

2 years ago

0.3.2

2 years ago