@wedgekit/form
v5.0.5
Published
A layout and validation tool for form fields.
Downloads
68
Maintainers
Keywords
Readme
WedgeKit Form
Install
yarn add @wedgekit/form
Usage
import Form, { Field } from '@wedgekit/form';
// ...
const handleFirstNameValidation = (value) => {
if (dirtyWords.some((d) => value.includes(d))) {
return 'DIRTY_WORD';
}
return null;
};
const App = (props) => (
<Form onSubmit={handleSubmit}>
{({ formProps, dirty, submitting, valid }) => (
<form {...formProps}>
<Field
name="firstName"
label="First Name"
defaultValue=""
validate={handleFirstNameValidation}
>
{({ fieldProps }) => <Input {...fieldProps} />}
</Field>
<Button domain="primary" type="submit" disabled={!dirty || submitting || !valid}>
Submit
</Button>
</form>
)}
</Form>
);
// ...
API
Form
children
- Type:
(FormState) => Node
- Required: ✅
A renderProp that offers access to the current form state as well as expects formProps
to be passed into an HTML form element.
<Form>
{({ formProps }) => (
<form {...formProps}>
// ...
</form>
)}
disabled
- Type:
boolean
- Required: ❌
Disabled will set the entire form to a disabled state.
onSubmit
- Type:
() => ?Object | Promise<?Object> | void
- Required: ❌
From Final Form Documentation:
Function to call when the form is submitted. There are three possible ways to write an onSubmit function:
- Synchronously: returns undefined on success, or an Object of submission errors on failure
- Asynchronously with a callback: returns undefined, calls callback() with no arguments on success, or with an Object of submission errors on failure.
- Asynchronously with a Promise: returns a Promise<?Object> that resolves with no value on success or resolves with an Object of submission errors on failure. The reason it resolves with errors is to leave rejection for when there is a server or communications error.
Submission errors must be in the same shape as the values of the form. You may return a generic error for the whole form (e.g. 'Login Failed') using the special FORM_ERROR string key.
scrollRef
If used inside of a fixed height container, the ref of the containing element should be passed to the form in the scrollRef
prop. This specifies which container to scroll when a form field needs to be brought into view. Default is the window object.
Form State
formProps
- Type:
{ ref: Ref<'form'>, onSubmit: () => void, onKeyDown: () => void }
A set of props passed into an HTML form element to manage the state of the form.
disabled
- Type:
boolean
A boolean denoting if the form is currently disabled.
dirty
- Type:
boolean
A boolean denoting if the state of the form is not equal to the state last submitted.
submitting
- Type:
boolean
A boolean denoting if the form is currently being submitted asynchronously.
getValues
- Type:
() => ?Object