# d98c_dynamic-forms

> React Dynamic Form with Formik and Yup validations

Latest version **2.0.1** (published 2023-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install d98c_dynamic-forms
pnpm add d98c_dynamic-forms
yarn add d98c_dynamic-forms
bun add d98c_dynamic-forms
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2023-06-10 |
| First published | 2023-06-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 168.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | danny1998cuba |
| Maintainers | danny98cuba |

## Links

- npm: https://www.npmjs.com/package/d98c_dynamic-forms
- Repository: https://github.com/danny1998cuba/dynamic-forms
- npm.io page: https://npm.io/package/d98c_dynamic-forms

## Dependencies (2)

- [yup](https://npm.io/package/yup.md) ^1.2.0
- [formik](https://npm.io/package/formik.md) ^2.4.1

## Recent versions

- 2.0.1 (latest) — 2023-06-10

## README

# d98c_dynamic-forms

> React Dynamic Form with Formik and Yup validations

[![NPM](https://img.shields.io/npm/v/dynamic-forms.svg)](https://www.npmjs.com/package/d98c_dynamic-forms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save d98c_dynamic-forms
```

## Usage

```jsx
import React, { Component } from 'react'

import DynamicForm from 'd98c_dynamic-forms'

class Example extends Component {
  render() {
    return (
      <DynamicForm
        formInputs={formInputs}
        onSubmit={(values) => console.log(values)}
      />
    )
  }
}
```

### Input Required Object

You should provide an object array with the data for the input fields, following the next schema.

```js
const formInputs = [
 {
    name: string,
    value: string | number | boolean,

    placeholder?: string,
    label?: string,
    inline?: 'true' | 'false',

    type: 'text' | 'radio-group' | 'email' | 'password' | 'select' | 'checkbox' | 'header',
    typeValue?: 'string' /* default */ | 'boolean' | 'number' | '',
    options?: [
      {
        value: string | number
        desc: string
      }
    ],
    //See validations section
    validations: [
      {
        type: 'required'
        value?: string
        message: string
      }
    ]
  }
]
```

### Validations

List of supported validators by <code>typeValue</code>. In case that the <code>typeValue</code> attribute is not set, it'll be managed as a string.

<table>
  <thead>
    <tr>
      <th rowspan="2">TypeValue</th>
      <th rowspan="2">Type</th>
      <th colspan="2">Value</th>
      <th rowspan="2">Description</th>
    </tr>
    <tr>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>*</td>
      <td>required</td>
      <td>null</td>
      <td></td>
      <td>The value is required</td>
    </tr>
    <tr>
      <td rowspan="9">string</td>
      <td>isEmail</td>
      <td>null</td>
      <td></td>
      <td>The value should be a valid email address</td>
    </tr>
    <tr>
      <td>isUrl</td>
      <td>null</td>
      <td></td>
      <td>The value should be a valid url</td>
    </tr>
    <tr>
      <td>isUuid</td>
      <td>null</td>
      <td></td>
      <td>The value should be a valid UUID</td>
    </tr>
    <tr>
      <td>lowercase</td>
      <td>null</td>
      <td></td>
      <td>The value should be written lower case</td>
    </tr>
    <tr>
      <td>uppercase</td>
      <td>null</td>
      <td></td>
      <td>The value should be written upper case</td>
    </tr>
    <tr>
      <td>minLength</td>
      <td>integer</td>
      <td>An integer that defines the limit</td>
      <td>The string shuold have at least the provided number of characters</td>
    </tr>
    <tr>
      <td>maxLength</td>
      <td>integer</td>
      <td>An integer that defines the limit</td>
      <td>The string shuold have up to the provided number of characters</td>
    </tr>
    <tr>
      <td>length</td>
      <td>integer</td>
      <td>An integer that defines the limit</td>
      <td>The string shuold have exactly the provided number of characters</td>
    </tr>
    <tr>
      <td>regex</td>
      <td>Regex</td>
      <td>A valid regex to match. The format must be: <code>/^{your regex}+$/</code></td>
      <td>The value should match the provided regex. Not empty strings allowed as values</td>
    </tr>
    <tr>
      <td rowspan="2">boolean</td>
      <td>isTrue</td>
      <td>null</td>
      <td></td>
      <td>The value should be true</td>
    </tr>
    <tr>
      <td>isFalse</td>
      <td>null</td>
      <td></td>
      <td>The value should be false</td>
    </tr>
    <tr>
      <td rowspan="7">number</td>
      <td>integer</td>
      <td>null</td>
      <td></td>
      <td>The value should be a valid integer</td>
    </tr>
    <tr>
      <td>positive</td>
      <td>null</td>
      <td></td>
      <td>Only admit positive numbers</td>
    </tr>
    <tr>
      <td>negative</td>
      <td>null</td>
      <td></td>
      <td>Only admit negative numbers</td>
    </tr>
    <tr>
      <td>min</td>
      <td>number</td>
      <td>A valid number as limit of the operation</td>
      <td>The value should be greater or equal than the provided minimum</td>
    </tr>
    <tr>
      <td>moreThan</td>
      <td>number</td>
      <td>A valid number as limit of the operation</td>
      <td>The value should be strictly greater than the provided minimum</td>
    </tr>
    <tr>
      <td>max</td>
      <td>number</td>
      <td>A valid number as limit of the operation</td>
      <td>The value should be lower or equal than the provided maximum</td>
    </tr>
    <tr>
      <td>lessThan</td>
      <td>number</td>
      <td>A valid number as limit of the operation</td>
      <td>The value should be strictly lower than the provided maximum</td>
    </tr>
    <tr>
      <td rowspan="2">date</td>
      <td>min</td>
      <td>date</td>
      <td>A date object or a correctly date formated string </td>
      <td>The value should be a date after the provided limit</td>
    </tr>
    <tr>
      <td>max</td>
      <td>date</td>
      <td>A date object or a correctly date formated string </td>
      <td>The value should be a date before the provided limit</td>
    </tr>
    </tbody>
  </table>

If a wrong rule type is set, the whole rule would be ignored.

## License

MIT © [danny1998cuba](https://github.com/danny1998cuba)

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