# react-generated-form > # React JSON Form > Create forms with ease Latest version **0.1.3** (published 2021-07-19) · MIT license · 0 weekly downloads ## Install ```sh npm install react-generated-form pnpm add react-generated-form yarn add react-generated-form bun add react-generated-form ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.3 | | Published | 2021-07-19 | | First published | 2021-03-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 8 | | Unpacked size | 78.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Maintainers | rawnly | ## Links - npm: https://www.npmjs.com/package/react-generated-form - Repository: https://github.com/rawnly/react-generated-form - Homepage: https://github.com/rawnly/react-generated-form#readme - Issues: https://github.com/rawnly/react-generated-form/issues - npm.io page: https://npm.io/package/react-generated-form ## Dependencies (8) - [bootstrap](https://npm.io/package/bootstrap.md) ^4.6.0 - [type-fest](https://npm.io/package/type-fest.md) ^0.21.3 - [classnames](https://npm.io/package/classnames.md) ^2.3.1 - [ts-pattern](https://npm.io/package/ts-pattern.md) ^3.2.1 - [@hookform/error-message](https://npm.io/package/@hookform/error-message.md) ^2.0.0 - [rollup-plugin-collect-sass](https://npm.io/package/rollup-plugin-collect-sass.md) ^1.0.9 - [@buttercup/react-formatted-input](https://npm.io/package/@buttercup/react-formatted-input.md) ^1.4.0 - [react-google-places-autocomplete](https://npm.io/package/react-google-places-autocomplete.md) ^3.2.3 ## Recent versions - 0.1.3 (latest) — 2021-07-19 - 0.1.3-pr-9.0 (next) — 2021-07-19 - 0.1.1 (stable) — 2021-03-18 - 0.1.1-develop.1 (canary) — 2021-03-18 - 0.0.1-removing-bootstrap.8 (alpha) — 2021-03-17 - 0.1.2 — 2021-03-18 - 0.1.1-develop.0 — 2021-03-18 - 0.0.1-removing-bootstrap.7 — 2021-03-17 - 0.0.1-removing-bootstrap.6 — 2021-03-17 - 0.0.1-removing-bootstrap.5 — 2021-03-17 - 0.0.1-removing-bootstrap.4 — 2021-03-16 - 0.0.1-removing-bootstrap.3 — 2021-03-16 - 0.0.1-removing-bootstrap.2 — 2021-03-16 - 0.0.1-removing-bootstrap.1 — 2021-03-16 - 0.0.1-removing-bootstrap — 2021-03-15 - … 3 more at https://npm.io/package/react-generated-form/versions ## README # React JSON Form > Create forms with ease ### Table of Contents - [Under The Hood](#under-the-hood) - [Installation](#installation) - [Usage](#usage) - [Contributing](#contributing) ## Under The Hood Unde the hood this packages uses `react-hook-form` to validate components and bootstrap for the style. ## Installation ```sh npm install react-generated-form # or yarn add react-generated-form ``` ## Usage ```tsx import { useForm, FormProvider } from 'react-hook-form' // Import your CSS on top import 'bootstrap/dist/bootstrap.min.css'; // Or just import component style import 'react-generated-form/dist/style.css' import { GeneratedForm, FormStructure, GeneratedFormConfigProvider, } from 'react-generated-form' type FormData = { firstName: string; lastName: string; email: string; password: string; } const formStructure : FormStructure = [ // Section 1, Name and Surname [ { name: 'firstName', // keyof FormData label: 'First Name', placeholder: 'John', required: true, // by default the error label will be `Field ${label} is required!` xs: 12, // 1 input per row on mobile md: 6 // 2 inputs on the same row if not mobile. }, { name: 'lastName', label: 'Last Name', placeholder: 'John', required: true, // by default the error label will be `Field ${label} is required!`, xs: 12, md: 6 }, ], // Section 2, Email [ { name: 'email', label: 'Email', placeholder: 'you@domain.me', required: true, type: 'email', // Specify input type, xs: 12 // We can skip this, it's the default behaviour } ], // Section 3, Password and Validation [ { name: 'password', label: 'Password', placeholder: '*********', hint: 'Must be 8-16 characters.', // You can also add an hint required: true, validator: { // refer to react-hook-form API minLength: { value: 8, message: 'The password must be at least 8 characters.' }, maxLength: { value: 16, message: 'The password must be maximum 16 characters.' } }, xs: 12, md: 6 }, { name: 'password_confirm', // with the suffix `_confirm` the form auto validates the fields, so you don't need to manually check values. label: 'Confirm Password', required: true, xs: 12, md: 6 } ] function Form() { const methods = useForm({ mode: 'onSubmit' }) const onSubmit = useCallback(...); return (
structure={formStructure}>
) } {/* Later */} {/* Example with bootstrap classes */} ReactDOM.render(
) ] ``` ## Docs > (work in progress) ### Field Props #### `label: string` The label of the input #### `name: string` Name of the input (will be the key in the json) #### `type?: | time | coords | select | checkbox` - by default is `text` Type of the input, some types such as the `email` have special validation. #### `placeholder?: string` Placeholder of the input #### `hint?: string` A small text under the input #### `noHint?: boolean` Hide the hint #### `required?: boolean | string` Mark a field as required, the default error text will be `Field {label} is required.` #### `validator: {}` Some options to validate the value #### `when?: (fields: FormFields) => boolean` The input will be hidden until this function returns true #### `watch?: string[]` Tell the input which values to watch for the `when` function. #### `xs?: number` Column size on mobile #### `md?: number` Column size on tablet #### `lg?: number` Column size on desktop ## Contributing Feel free to contribute in any way, or just open an issue ✌️ --- _Source: https://npm.io/package/react-generated-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._