d98c_dynamic-forms

React Dynamic Form with Formik and Yup validations

Install

npm install --save d98c_dynamic-forms

Usage

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.

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 typeValue. In case that the typeValue attribute is not set, it'll be managed as a string.

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

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

License

MIT © danny1998cuba