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