Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

dynamic-form-json

1.0.8 • Public • Published

GitHub license dynamic-form-json version npm version

Dynamic Form Json

dynamic-form-json is a tiny library to generate a Form in React automatically based on certain array of object that passed as a props. This library use regular css created from scratch, so user can customize it in the future. On top of it, i use Formik and Yup for form's skeleton and validations. Credit goes to vijayranghar for the inspiration how to create dynamic validation on Yup from this link.

Installation

npm install dynamic-form-json or yarn add dynamic-form-json

Peer Dependencies

Remember you also need to install the peer dependencies of this package. They are formik, yup, and styled-components.

How to Use

Incase you are curious to try this library, you can implement it as the source code below.

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
 
ReactDOM.render(<App />, document.getElementById("root"));

App.js

import DynamicForm from 'dynamic-form-json';
import { formData } from './data/formData';
 
function App() {
  const handleSubmission = val => {
    console.log('Values : 'val)
  }
  return (
    <div>
      <h2>My Amazing Form</h2>
      <DynamicForm fields={formData} cbSubmit={handleSubmission} />
    </div>
  )
}
 
export default App;

formData.js

export const formData = [
  {
    id: "name",
    label: "Full name",
    placeholder: "Enter full name",
    type: "text",
    validationType: "string",
    value: "",
    validations: [
      {
        type: "required",
        params: ["this field is required"]
      },
      {
        type: "min",
        params: [5, "name cannot be less than 5 characters"]
      },
      {
        type: "max",
        params: [10, "name cannot be more than 10 characters"]
      }
    ]
  }
];

Supported Fields

Currently this library supports form input types such as:

  • text

  • select

  • textarea

  • radio

  • checkbox

  • upload

API

DynamicFormJSON - DynamicForm(fields: Array[Object], cbSubmit: Func)

This library could be imported by any name you like because we export it by default approach. It also accepts two parameters which are named fields and cbSubmit. All params are required.

import DynamicForm from "dynamic-form-json";
Text - TextField(id: string, label?: string, placeholder?: string, type: string("text"), validationType: string, value?: string, validations?: array[object])

Text field type are includes of text, email, and number from regular HTML api of input's type. Password is not include yet. So, for Text there are 4 properties that not required which marked by question mark (?).

Select - SelectField(id: string, label?: string, placeholder?: string, type: string("select"), validationType: string, value?: string, options: array[string], validations?: array[object])
TextArea - TextAreaField(id: string, label?: string, placeholder?: string, type: string("textarea"), validationType: string, value?: string, validations?: array[object])
Radio - RadioField(id: string, label?: string, placeholder?: string, type: string("radio"), validationType: string, value?: string, options: array[string], validations?: array[object])
Checkbox - CheckboxField(id: string, label?: string, placeholder?: string, type: string("textarea"), validationType: string, value?: string, options: array[string], validations?: array[object])

Info

This package is still on development. Not ready yet to use in production.

Install

npm i dynamic-form-json

DownloadsWeekly Downloads

27

Version

1.0.8

License

MIT

Unpacked Size

25.9 kB

Total Files

16

Last publish

Collaborators

  • avatar