react-hook-superform

Harness the power of react-hook-form and create functional forms in React, FAST.

Features

• Access to every hook provided by useForm
• No need no write repetitive html, just an array of input names
• Extensive control over input types and formatting using props
• Usable as an input form, editable details form, or display-only details block
• If using styed-components, access to your project's themeProvider

Install

npm install @benisenstein/react-hook-superform

Links

• react-hook-form docs
• examples

Coming soon to these docs:

• Theming your forms with styled-components
• Building powerful custom input components
• Writing your own css for ANY part of your forms

Quickstart

import { SuperForm } from 'react-hook-superform'

const BasicSubmissionForm = () => {
  const inputs = [
    { name: 'username' }, 
    { name: 'password' }, 
    { name: 'email' }
  ]
  const onSubmit = async (data) => console.log(data) 

  /* 
  Result in the console on submitting the form:

  {
    username: "SOME_USERNAME",
    password: "SOME_PASSWORD",
    email: "SOME_EMAIL"
  }
  */

  return <SuperForm 
    titleText='Signup' 
    inputs={inputs}  
    onSubmit={onSubmit} 
  />
}

export default BasicSubmissionForm

Tech

react-hook-superform uses a number of open source projects:

• react-hook-form - "Performant, flexible and extensible forms with easy-to-use validation."
• React - "A JavaScript library for building user interfaces"
• react-loading-skeleton - "Make beautiful, animated loading skeletons that automatically adapt to your app."
• styled-components - "Visual primitives for the component age."
• react-datetime-picker - "A datetime picker for your React app."

Documentation

SuperForm

import { SuperForm } from 'react-hook-superform'

A dynamic form component wrapped in a flexbox div tag. By default, the wrapper div is set to width: 100% but this can be changed with props.

Props

inputs | type: array | default: undefined

The inputs array is very important. Its absence won't break the component, but it might as well be required for SuperForm to be of any use. It needs this structure:

const inputs = [
  {
    name: "item",
    registerOptions: { required: "You must choose an item." },
    labelText: "",
    maxLength: '50'
  },
  {
    name: "task",
    registerOptions: { required: "You must choose a task." },
    labelText: "Custom label text",
    maxLength: '50'
  }
]

• Each JavaScript object in the array will result in the rendering of a ComplexInput - a label, html input element with corresponding name, and a conditional error message if validation has been selected. ComplexInput has some other potential use cases and is also exported by 'react-hook-superform'. See 'ComplexInput' for more info.
• The 'name' attribute of each input will determine the data structure of the JavaScript object returned by the form. See the quickstart example.
• Other than the crucial 'name' prop, inputs can take any regular html attributes as well as some custom ones.

See 'ComplexInput' for a complete look at individual input props.

Other Props

ComplexInput

import { ComplexInput } from 'react-hook-superform'

Render a label, input element, and error message with as little code as possible.

Props

name | type: str | default: undefined The 'name' prop is the bare minimum you need to deliver a functional ComplexInput that meets accessibility standards. The label's "for" attribute, the input's "id" and "name" will all be given the value you specify for the 'name' prop.

wrapperProps: Props for the outer wrapper div.
It needs this structure:

const wrapperProps = {
  gridColumn: "",
  noColumn: false,
  noFullWidth: true,
  // any other props for the outer wrapper div.
}

GroupOfInputs

import { GroupOfInputs } from 'react-hook-superform'

Deliver a series of accessibility-compliant input fields with as little code as possible.

<SuperForm> renders a <GroupOfInputs> under the hood, so for information on props check out the section on 'SuperForm'.

<GroupOfInputs> can be very useful for clustering input fields and rendering them in different ways, such as horizontally in a row. For more information, check out the section on 'using custom React components as input fields'

SuperFormSelect

import { SuperFormSelect } from 'react-hook-superform'

Deliver a drop-down menu with as little code as possible.

Props

options: | type: array | default: undefined List of options for the <select> element. Each option is declared as a JavaScript object, with a 'value' prop, and an 'optionText' prop if you want the text on the option to be something other than the value.

An example:

const options = [
  { optionText: "Lakeside Cottage", value: "5hbfjdg73" },
  { optionText: "Mountain Cabin", value: "bfgn3tgf" },
  { optionText: "Chicago Duplex", value: "bghfj66b3" }
]

This complete example includes the declaration of options within the larger structure of the 'inputs' array:

import { SuperForm, SuperFormSelect } from 'react-hook-superform'

const FormWithOneSelect = () => {
  const inputs = [
    {
      name: "province",
      wrapperProps: { gridColumn: '3/4' },
      registerOptions: { required: "You must select a province." },
      isCustomComponent: true, 
      as: SuperFormSelect,     
      options: [
        { value: "AB" },
        { value: "BC" },
        { value: "SK" },
        { value: "MB" },
        { value: "ON" },
        { value: "QC" },
        { value: "PE" },
        { value: "NL" },
        { value: "NB" },
        { value: "NS" },
        { value: "YT" },
        { value: "NT" },
        { value: "NU" }
      ]
    }
  ]     

  const onSubmit = async (data) => {
    console.log("The selected province is: ", data.province)
  }  	

  return <SuperForm
    titleText="Example With One Select"
    inputs={inputs}
    onSubmit={onSubmit}
  />
}

export default FormWithOneSelect

ToggleVisibleInput

import { ToggleVisibleInput } from 'react-hook-superform'

An input field with the option to make input visible, for passwords and such.

Props

License

MIT

Free Software, Hell Yeah!