This package has been deprecated

Author message:

remove

@amad27/ez-form

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```
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',
  },
}