react-uniform-hook

Uniform Hook

Uniformly generates a form from a schema with on the fly customizability!

Why?

• helps save time writing complex forms
• allows you to easily share inputs with other forms
• allows teams to stay consistent with forms
• handles the repetitive dull parts of creating a form for you!

Hook props:

Prop	Type	Required	Description
onSubmit	Function	false	triggers on submit button click and returns all values
onChange	Function	false	triggers on input change and returns all values
onBlur	Function	false	triggers on input blur and returns all values
schema	Object	true	schema based off what form is generated from
validation	Object	false	overwrites the schema's validation function for an input (extremely useful when wanting to share validation with)
initialValues	Object	false	maps the initial values to schema
featureFlags	Object	false	just a object of feature flags
validateInitialValues	boolean	false	validates initial values once form loads
disabled	Boolean || JSX	false	disables inputs if true
viewMode	Boolean || JSX	false	toggles viewMode in schema
className	String	false	passes css classes down to the main form component
errorClass	String	false	passes css class to error message
viewModeFallbackText	String	false	passes fallback viewMode text when value is null or undefined. Default is "N/A"
multiForm	Boolean	false	allows you to create a multi form

Component Example:

import { UniformHook } from "react-uniform-hook";
const schema = {
  inputs: {
    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" }
      ]
    }
  }
};
 
const Form = () => {
  const onSubmit = values => {
    console.log(values);
  };
 
  const { form } = UniformHook({ schema, onSubmit });
 
  return <div>{form}</div>;
};

// More complex example
 
const Form = () => {
  const onSubmit = values => {
    console.log(values);
  };
  const customSubmitButton = <button type="submit">My Custom Submit</button>;
 
  const { form, clearForm, addFields, removeFields } = UniformHook({
    schema,
    onSubmit,
    submitButton: customSubmitButton
  });
 
  return (
    <div>
      {form}
      <button onClick={clearForm}>Clear Form</button>
      <button onClick={addFields}>Add Fields</button>
      <button onClick={removeFields}>Remove Fields</button>
    </div>
  );
};

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
untracked	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 = {
  inputs: {
    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"
    }
  }
};