VanillaForm

for dynamically building out forms from JSON

A wrapper around React-Final-Form primarily built to work with data provided by sanity.io (json), and no styling included.

An alternative package Form offers style injected by theme-ui.

Table of Contents

• Installation
• Usage
• Available components
• Functions

Installation

yarn add @newfrontdoor/vanilla-form

or

npm install @newfrontdoor/vanilla-form

Usage

If you're using Sanity, you can find some suitable schemas for your studio in the schemas folder. They're also exported from this project as formObject and formField;

import {VanillaForm, validation} from '@newfrontdoor/vanilla-form'
const MyFormPage = ({formData}) => {
    const {fields requiredError} = formData
    return  <VanillaForm
              fields
              title="My Form"
              description="This is a cool form"
              validationFn={values => validation(values, formData)}
              submitForm={() => console.log('submitted!')}
            />
}

Obviously all props could be passed in from your data store, meaning you can end up just doing:

<VanillaForm {..props} validationFn={values => validation(values, formData)}>

Available components

<VanillaForm> see above for basic usage. See prop definitions below (compared to it's sister package, it uses plain html tags, rather than theme-ui elements)

Props

fields [required]

an array of objects with the following shape:

{
    id: <String>,
    input: <String> InputType ['text', 'email', 'telephone', 'date', 'textarea', 'select', 'checkbox', 'radio', 'url', 'file', 'number'],
    label: <String>,
    required: <Bool>,
    validation: {
        regexString: <RegEx>,
        warning: <String>
    },
    placeholder: <String>,
    initialValue: <String>
}

submitForm [required]

Your callback for the form submission. The form values can be accessed on submission as below. As per React-Final-Form design, the submitForm callback will not be run unless the form has no validation errors.

submitForm={formValues => {
    console.log('Submitted!');
    console.log(formValues);
    }}

title [optional]

A string to output as your title

id [optional]

To set an ID on the wrapping element

description , [optional]

Add a description to your form. This can be a string, or any content that can be parsed using the optional blockText function.

blockText [optional]

If your description comes in some other form, say Portable Text, then this is the function you'd pass in to interpret that text. For example, if you were bringing in a description from Sanity.io you'd use the following function: text => <BlockText blocks={text} />

validationFn [optional]

You can opt into validation by adding a function which takes the object values{} and returns an object errors{}. This package provides a function validation (see below) to test both if a field is 'required' and/or against a regex provided per field.

Functions

validation

values => validation(values, formData[, regexLibrary])

This function provides the validation check for your form. As it's not baked into the Form component you're free to supply your own validation by swapping it out on the validations prop of the form component.

Parameters:

values [required]

This must be the first argument. It is the values returned from the form component for checking, passed from the validation callback. (See above)

formData [required]

This is an object:

{
    fields: <Array>,
    requiredError [optional]: <String>
}

This is what validation() maps over to check all your fields.

• fields is your array of fields which you will have used to create the form in the first place
• requiredError is an optional replacement string for the default error shown when a field is required: "required".

regexLookup [optional]

The validation function by default pulls in the 'regex-lookup' exported from this package with a collection of default validation regular expressions, but you're also able to supply your own default regex values as an optional argument, as (frankly) the regex values supplied are entirely geared toward my use case... So use regex-lookup.js as a launching point.