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:
;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 = { console; }; const form = ; return <div>form</div>;};
// More complex example const Form = { const onSubmit = { console; }; const customSubmitButton = <button type="submit">My Custom Submit</button>; const form clearForm addFields removeFields = ; 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:
;schema = inputs: name: label: "name" initialValue: "Whats your name" errorMessage required: false { if vallength > 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" 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" ;