0.6.0 • Published 5 years ago
@amad27/ez-form v0.6.0
EzForm Component
Easily generates a form from a schema. With on the fly customizability!
Inspired from using Formik!
Im tired of typing so much - Ware2Go Team 2019
Component props:
| Prop | Type | Required | Description |
|---|---|---|---|
| onSubmit | Function | false | triggers on submit button click and returns all values |
| onBlur | Function | false | triggers on input blur and returns all values and event |
| schema | Object | true | schema based off what form is generated from |
| initialValues | Object | null | maps the initial values to schema |
| formSchema | Array | false | Custom schema that 'overwrites' what you have in the regular schema. Allowing you to customize on the fly |
| showSubmitButton | Boolean | false | false hides submit button |
| disabled | Boolean || JSX | false | disables inputs if true |
| className | String | false | passes css classes down to the main form component |
Component Example:
import { EzForm } from 'ez-form'
const schema = {
name: {
label: 'name',
required: false,
type: 'text',
placeholder: 'Whats your name',
},
age: {
label: 'Age',
required: true,
type: 'number',
placeholder: 'Whats your age?',
},
favoriteColor: {
label: 'favoriteColor',
placeholder: 'Favorite color',
options: [{ value: "green", label: "green" }, { value: "red", label: "red" }, {value: "blue", label: "blue"}],
},
}
<EzForm
schema={schema}
onSubmit={(values) => {
console.log(values)
}}
>
{(form) => form}
</EzForm>Schema Format:
| Key | Type | Default | Description |
|---|---|---|---|
| validate | Function | null | uses this function to validate input |
| visibleIf | Function | null | adds ability to check if certain criteria is met and then make the input visible if it is |
| onSubmit | Function | null | on submit run mutation function and return value (Will not run function if value is empty) |
| label | String | null | text in input label |
| initialValue | any | null | sets initial value of input |
| type | String | null | input type: https://www.w3schools.com/html/html_form_input_types.asp |
| placeholder | String | null | sets input placeholder |
| required | Boolean | false | sets input as required |
| tracked | Boolean | true | allows you to disable value tracking on the input |
| customComponent | JSX | null | allows you to put whatever JSX you'd like to put in form |
| prependHtml | JSX | null | append html after the input |
| options | Array | null | converts input to select box options rendered from Array [{value: true, label: "yes"}, { value: false, label: 'no' }] |
| ...ETC | ANY | null | Anything else you add to schema get passed to the inputs as props |
Schema Example:
import {EzValidation} from "util/ezValidation"
schema = {
name: {
label: 'name',
initialValue: 'Whats your name',
validate: (val, vals) => EzValidation(val).isString().minLength(2).errorMessage,
required: false,
onSubmit: (val, vals) => {
if (val.length > 10) {
return val + " Thats a long Name"
}
},
type: 'text',
placeholder: 'name',
},
length: {
label: 'length',
required: true,
type: 'number',
placeholder: 'length of package',
},
moneyMoney: {
label: 'Money Money',
placeholder: 'How much you got?',
type: 'text',
prependHtml: (
<div className="input-group-prepend">
<span className="input-group-text" id="basic-addon1">
$
</span>
</div>
),
},
lengthIfOne: {
label: 'length if one',
visibleIf: values => values['length'] === '1',
required: true,
type: 'number',
placeholder: 'length',
},
selectMulti: {
label: 'selectMulti',
type: 'multiSelect',
placeholder: 'Favorite Color',
isMulti: true,
required: true,
customComponent: Select,
options: [{ value: 1, label: 'One' }, { value: 2, label: 'Two' }, { value: 3, label: "Three" }],
},
favoriteColor: {
label: 'favoriteColor',
placeholder: 'Favorite color',
options: [{ value: "green", label: "green" }, { value: "red", label: "red" }, {value: "blue", label: "blue"}],
},
masked: {
label: 'masked',
placeholder: 'masked',
required: true,
customComponent: InputMask,
mask: "9999-99-99",
maskChar: null,
},
description: {
label: 'description',
placeholder: 'description',
required: false,
type: 'textarea',
},
}