Miss any of our Open RFC calls?Watch the recordings here! »

react-uniform-hook

1.1.8 • Public • Published

Uniform Hook

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

NPM downloads NPM downloads NPM downloads

License: MIT semantic-release

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

Keywords

none

Install

npm i react-uniform-hook

DownloadsWeekly Downloads

0

Version

1.1.8

License

none

Unpacked Size

699 kB

Total Files

33

Last publish

Collaborators

  • avatar