dynamic-form-json

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #llm #windows #awesome #kubernetes #awesome-list #vue #pytorch #mcp #ios #open-source

dynamic-form-json

(★ 39)

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

dynamic-form-json 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ridoansaleh/dynamic-form-json/blob/master/LICENSE) [![dynamic-form-json version](https://img.shields.io/badge/dynamic--form--json-v1.0.9-green)](https://www.npmjs.com/package/dynamic-form-json) [![npm version](https://img.shields.io/badge/npm-v6.14.8-green)](https://www.npmjs.com/package/dynamic-form-json)

# 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](https://github.com/jaredpalmer/formik) and [Yup](https://github.com/jquense/yup) for form's skeleton and validations. Credit goes to [vijayranghar](https://github.com/vijayranghar) for the inspiration how to create dynamic validation on Yup from this [link](https://github.com/jquense/yup/issues/559).

## Installation

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

## Peer Dependencies

Remember you also need to install the [peer dependencies](https://yarnpkg.com/lang/en/docs/dependency-types/#toc-peerdependencies) 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

```js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
```

App.js

```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

```js
export const formData = [
  {
    id: "name",
    label: "Full name",
    placeholder: "Enter full name",
    type: "text",
    validationType: "string",
    value: "",
    validations: [
      {
        type: "required",
        params: ["name 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:

- [x] text

- [x] select

- [x] textarea

- [x] radio

- [x] checkbox

- [x] 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";
```

`fields` is a property that accepts array of object to create the inputs element inside a Form. The last one is `cbSumbit`, which will handle the submission for you. It accepts a callback function.

### TextField

These are the properties you can pass to an Object in formData array to create TextField component. Not all of them are required. The properties required are id, and type.

### SelectField

These are the properties you can pass to an Object in formData array to create SelectField component.

### TextArea

These are the properties you can pass to an Object in formData array to create TextArea component.

### Radio

These are the properties you can pass to an Object in formData array to create Radio component.

### Checkbox

These are the properties you can pass to an Object in formData array to create Checkbox component.

### UploadField

These are the properties you can pass to an Object in formData array to create UploadField component.

## Info

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

dynamic-form-json

dynamic-form-json 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

dynamic-form-json

dynamic-form-json 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README