React Dynamic Form with Formik and Yup validations
npm install --save d98c_dynamic-forms
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)}
/>
)
}
}
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
}
]
}
]
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.
MIT © danny1998cuba