strooks

A fine collection of Hooks, Components and Utils for your React application

Hooks

useForm()

useForm is the simplest, easiest and most versatile way to manage form state in React applications. It's the form manager that works closest to default HTML behavior so the only requirement is that you use the nameproperty in the form elements, so they will become the keys to your state

import { useRef } from 'react'
import { useForm } from 'strooks'

const MyComponent = () => {
  const formRef = useRef()
  const [formState, update, clear] = useForm(formRef, initialState)

  return <form ref={formRef} onSubmit={onSubmit}></form>
}

No need to:

• pass values into each input, everything is managed for you - the inputs are immediately filled according to the initial state
• setting up onChange method for the form or each input unless you want to run realtime validation
• ev.preventDefault() inside your onSubmit button
• worry about checked property for radio-buttons or checkboxes

out of the box:

• easy typing between number and text fields
• values as arrays (checkbox collections, multiselect)
• boolean fields (radio-buttons, checkboxes)
• nested fields using dot notation
• easy to work with custom components

Easy Typing

using the attribute type="number" or data-type="number" the value in the state will always be a number:

<form>
  <input type="text" name="firstName" />
  <input type="number" name="age" />
  <select name="yearsOfExperience" data-type="number">
    {new Array(50).fill(null).map(idx => (
      <option value={idx}>{idx} years</option>
    ))}
  </select>
</form>

results in a state typed like:

{ "firstName": "John", "age": 22, "yearsOfExperience": 15 }

Values as Arrays

whether using a multi-select or a set of checkboxes with the same name, the resulting state will be an array with the values:

<form>
  <select name="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <div>
    <h5>Hobbies</h5>
    <label>
      <input name="hobbies" type="checkbox" value="swimming" />
      <span>Swimming</span>
    </label>
    <label>
      <input name="hobbies" type="checkbox" value="running" />
      <span>Running</span>
    </label>
    <label>
      <input name="hobbies" type="checkbox" value="tennis" />
      <span>Tennis</span>
    </label>
  </div>
</form>

the resulting state will be:

{ "cars": ["volvo", "opel"], "hobbies": ["swimming", "tennis"] }

Boolean Fields:

getting a true or false from a checkbox or a pair of radio-buttons can be cumbersome, having to parse the checked property of several elements. With useForm is just a matter of "following the HTML"

• for checkboxes, not passing a value property, turns the property into true or false
• for radios, whatever value you pass into it, is going to be stored in the state

<form>
  <input type="checkbox" name="agree" />
  <div>
    <input type="radio" name="useColor" value={true} />
    <input type="radio" name="useColor" value={false} />
    {formState.useColor && (
      <div>
        <input type="radio" name="color" value="blue" />
        <input type="radio" name="color" value="red" />
        <input type="radio" name="color" value="green" />
      </div>
    )}
  </div>
</form>

will result in the state:

{ "agree": true, "useColor": true, "color": "red" }

Nested Fields

It's super easy to create forms with nested fields, take the following example:

<form ref={formRef} onSubmit={onSubmit}>
  <input type="text" name="name" />
  <input type="text" name="address.street" />
  <input type="number" name="address.zipCode" />
  <input type="text" name="address.city" />
</form>

will result in the state:

{ "name": "...", "address": { "street": "...", "zipCode": 12345, "city": "..." } }

Custom Components

a lot of the components we find on NPM won't work out of the box with useForm because they don't mimic the default behavior of HTML form elements but it's very easy to circumvent that, using the update method. For example, we're using a custom Select, that:

• receives an optionsarray in the form of [{ value, label }]
• needs to receive the selected value as a prop
• needs an onChange eventHandler that receives as parameter the whole option object

import { useRef } from 'react'
import { useForm } from 'strooks'
import { CustomSelect } from 'some-ui-library'

const App = () => {
  const formRef = useRef()
  const [formState, update] = useForm(formRef)

  const onSelectChange = (option) => {
    update(state => ({...state, flavor: option.value })
  }
  return (
    <form ref={formRef}>
      <CustomSelect options={options} value={formState.flavor} onChange={onSelectChange} />
    </form>
  )
}

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

MIT © andrepadez