9.22.20 • Published 4 months ago

@berlitz/form

Licence

MIT

Version

9.22.20

Deps

Size

141 kB

Vulns

Weekly

Summary Dependency Versions

Form

Creates a form from a provided schema.

Installation

yarn add @berlitz/form

Props

Argument	Type	Default	Notes
action	string		Added to the `action` attribute on the `<form>` element. Useful for making forms work when Javascript is disabled.
fields	array		Schema for generating the form fields. Refer to the proptypes for the required shape.
onSubmit	function		Callback used to handle form submission. `onSubmit(values, setSubmitting, setStatus, resetForm)`
enableReinitialize	boolean	`true`	Sets the Formik `enableReinitialize` prop. More info https://tinyurl.com/rzwvmhr
method	string	'post'	Sets the `method` attribute on the `<form>` element.
hiddenFields	array		Schema for generating hidden form fields.
light	boolean	`false`	Sets the background to a solid colour and changes all labels and text in the form to be light.
loadingLabel	string	'Loading'	Text for the submit button when it is loading.
onChange	function		Callback used to handle form changes. `onChange(values)`
submitLabel	string	'Submit'	Text for the submit button.
termsLabel	string		Text for a Terms and Conditions checkbox. The checkbox will not show if no text is provided.
submitButtonRef	object		A ref that is passed to the `<SubmitButton />` on this form. Useful for triggering submit events outside of this component.
hideSubmitButton	boolean		Useful in combination with `submitButtonRef` for showing a custom submit button outside of this component.

Usage

import Form from '@berlitz/form'

<Form
  action="/"
  onSubmit={(values, setSubmitting) => {
    alert(values)
    setTimeout(() => {
      setSubmitting(false)
    }, 2000)
  }}
  submitLabel="Find out more"
  fields={fields}
  hiddenFields={hiddenFields}
  termsLabel="I accept the terms"
  onChange={values => {
    setValues(values)
  }}
  light
/>