# react-json-to-form

> React form component generator from Json

Latest version **1.2.8** (published 2020-05-25) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-json-to-form
pnpm add react-json-to-form
yarn add react-json-to-form
bun add react-json-to-form
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.8 |
| Published | 2020-05-25 |
| First published | 2019-11-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Juan Manuel Sánchez Lozano |
| Maintainers | juanmsl |
| Keywords | react, form, generator, json |

## Links

- npm: https://www.npmjs.com/package/react-json-to-form
- Repository: https://github.com/juanmsl/react-json-to-form
- Homepage: https://juanmsl.github.io/react-json-to-form/
- npm.io page: https://npm.io/package/react-json-to-form

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.2.8 (latest) — 2020-05-25
- 1.2.7 — 2020-05-25
- 1.2.6 — 2020-05-25
- 1.2.5 — 2020-05-25
- 1.2.4 — 2020-05-25
- 1.2.3 — 2020-05-25
- 1.2.2 — 2020-05-25
- 1.2.1 — 2020-05-25
- 1.2.0 — 2020-05-25
- 1.1.0 — 2020-05-24
- 1.0.4 — 2020-01-23
- 1.0.3 — 2020-01-23
- 1.0.2 — 2020-01-23
- 1.0.1 — 2020-01-23
- 1.0.0 — 2020-01-23
- … 12 more at https://npm.io/package/react-json-to-form/versions

## README

# React Json To Form

Work with forms in React as jsons, control the fields and how your form render itself.

## Demo

See [this demo page](https://juanmsl.github.io/react-json-to-form/) and check it out.

## Installation

npm
```
npm install react-json-to-form
```

yarn
```
yarn add react-json-to-form
```

## usage

```javascript
import React from 'react';
import Form from 'react-json-to-form';


class App extends React.Component {
  getFormData = () => {
    return {
      fields: [
        {
          name: "email",
          type: "email",
          label: {
            value: "Email"
          }
        },
        {
          name: "password",
          type: "password",
          label: {
            value: "Password"
          }
        },
        {
          name: "submit",
          type: "submit",
          value: "Login"
        }
      ]
    };
  };

  handleSubmit = (e, data) => {
    console.log(data);
  };

  render() {
    const formData = this.getFormData();

    return (
      <section>
        <Form
          data={formData}
          onSubmit={this.handleSubmit}
        />
      </section>
    );
  }
}
```

## Props

Prop|Type|Default Value|Options|Description
----|----|-------------|-------|-----------
data|Object|{}|Data attributes specified below|Json data to transform to a form component
onSubmit|function| |`(e, formData) => {}`|Function to handle data when the form is submitted
children|Element or element's array| | |Childrens to render at the beginning of the form

> Any other prop is passed directly as props to form DOM element
  Example:
  className, autoComplete, etc

### Data props

Prop|Type|Default Value|Options|Description
----|----|-------------|-------|-----------
allFieldsRequired|bool|`false`|`true` `false`|Set all fields as required or not
fieldsGroupClass|string|`null`| |Default Group of fields className
fieldClass|string|`null`| |Default field className
labelClass|string|`null`| |Default label className
inputClass|string|`null`| |Default input className
fields|array| |Fields attributes specified below|List of fields to render in the form

### Fields props

Prop|Type|Default Value|Options|Description
----|----|-------------|-------|-----------
type|string| |`group` `text` `password` `email` `number` `date` `select` `textarea` `custom` `radio` `submit` `reset`|
name|string| | |
value|string| | |
required|bool| |`true` `false`|
autoComplete|string| | |
className|string| | |
fieldClass|string| | |
label|object| |Label attributes specified below|
options|array| |Options attributes specified below|

### Label props

Prop|Type|Default Value|Options|Description
----|----|-------------|-------|-----------
value|string| | |
className|string| | |

### Options props

Prop|Type|Default Value|Options|Description
----|----|-------------|-------|-----------
value|string| | |
label|string| | |

---
_Source: https://npm.io/package/react-json-to-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._