Ez-formbecauseican NPM

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`	false	disables inputs if true
viewMode	`Boolean \|\| JSX`	false	toggles `viewMode` in schema
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	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
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	s

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

ez form ez-form

@everything-registry/sub-chunk-1640

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago