npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@newfrontdoor/form

v0.8.0

Published

A wrapper around React-Final-Form primarily built to work with data provided by [sanity.io](sanity.io) (json), and styling injected by [theme-ui](https://theme-ui.com/). However, you're not stuck with theme-ui! Check out (VanillaForm)[https://www.npmjs.co

Downloads

55

Readme

Form component

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 styling injected by theme-ui. However, you're not stuck with theme-ui! Check out (VanillaForm)[https://www.npmjs.com/package/@newfrontdoor/vanilla-form] if you'd prefer work with your own styling.

Or just use this library as an inspiration!

Table of Contents

Installation

yarn add @newfrontdoor/form theme-ui

or

npm install @newfrontdoor/form theme-ui

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 {Form, validation} from '@newfrontdoor/form'
const MyFormPage = ({formData}) => {
    const {fields requiredError} = formData
    return  <Form
              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:

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

Available components

<Form> see above for basic usage. See prop definitions below.

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.