ez-formbecauseican

EzForm Component

Easily generates a form from a schema. With on the fly customizability!

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
onChange	Function	false	triggers on input change 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
featureFlags	Object	null	just a object of feature flags
validateInitialValues	boolean	false	validates initial values once form loads
schemaModifier	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`
viewMode	`Boolean		JSX`
groupClassName	String	false	passes css classes down to the group component which contains the input, label, and error message
className	String	false	passes css classes down to the main form component
errorClass	String	false	passes css class to error message
viewModeDefaultText	String	"N/A"	passes default viewMode text when value is null or undefined
multiForm	Boolean	false	allows you to create a multi form

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>

// More complex example
<EzForm
  schema={schema}
  onSubmit={values => {
    console.log(values);
  }}
>
  {({ form, clearForm, addFields, removeFields }) => 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
featureFlag	String	null	feature flag input is associated with
required	`Boolean	Function`	false
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
functionalComponent	JSX	null	allows you to put whatever Functional Component you'd like to put in form
viewModeComponent	Function	null	allows you to put whatever Component below the label you'd like to render when viewMode is toggled value and values, get passed to function
viewModeClass	Function	null	class put onto the viewMode Text
customViewMode	Function	null	allows you to put whatever Component you'd like to render when viewMode is toggled schema key value, value, and values, get passed to function
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 a prop

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"
  }
};