0.13.1...0.13.2

0.13.0...0.13.1

0.12.1...0.13.0

• Add ability to validate all inputs in blur via formOptions.validateOnBlur. (#110)
• Prevent unnecessary re-renders when used as dependecies of other hooks (#116)
• Fixed stale reference to formState when accessed via a validate or onChange
• Fix reset of unmounted inputs (#114)
• Dev dependency maintenance:
  • #102
  • #103
  • #104

🚀 Features

Added Support for Custom Input Components

useFormState can now work with custom inputs using the new raw type. For example, controls like react-select or react-datepicker have onChange and value props that expect a custom value instead of an event.

For this kind of components, raw is used to keep track of a raw/custom value inside the form state.

import DatePicker from 'react-datepicker';

function Widget() {
  const [formState, { raw }] = userFormState({ date: new Date() });
  return (
    <>
      <DatePicker {...raw('date')} />
    </>
  );
}

Further reading:

• https://github.com/wsmd/react-use-form-state#custom-controls

Setting Input Values Manually

It's now possible to update the state value of an input using the new formState.setField option.

function Form() {
  const [formState, { text }] = useFormState();

  function setNameField() {
    // setting the input value manually
    formState.setField('name', 'Mary Poppins');
  }

  return (
    <>
      <input {...text('name')} readOnly />
      <button onClick={setNameField}>Set Name</button>
    </>
  )
}

It's also possible to clear a single input's value using formState.clearField.

Further reading:

• https://github.com/wsmd/react-use-form-state#updating-fields-manually

Resetting Form State

Resetting the entire form state is now possible using formState.clear. This can be useful for resetting all fields after a form is submitted.

function Form() {
  const [formState, { text, email }] = useFormState();
  return (
    <>
      <input {...text("first_name")} />
      <input {...text("last_name")} />
      <input {...email("email")} />
      <button onClick={formState.clear}>Clear All Fields</button>
    </>
  );
}

Further reading:

• https://github.com/wsmd/react-use-form-state#resetting-the-from-state

✨ Improvements

Improved Type Safety

This release also bring a number of improvements to the TypeScript types for additional type safety.

A special thanks to all the contributors that helped make this release possible! 🙇‍

• @jwalton
• @danielbuechele

✨ Improvements

Added Typings for state.errors

In 0.9.0, react-use-form-state added ability to specify custom validation errors. With this release, it's possible to add additional type safety to those custom errors retrieved via state.errors.

interface I18nError {
  en: string;
  fr: string;
}

interface FormFields {
  username: string;
  password: string;
}

interface FormErrors {
  username?: I18nError;
  password?: string;
}

const [formState, input] = useFormState<FormFields, FormErrors>();

formState.errors.username; // Will be undefined, or I18nError

Further reading:

• https://github.com/wsmd/react-use-form-state/tree/0.9.1#working-with-typescript

🐛 Bug Fixes

Stricter Type Safety for State Keys

When working with TypeScript, types of values, validity, touched and errors are now stricter, which means attempts to accessing properties that don't exists on these objects will result in an error at build time.

interface FormFields {
  username: string;
  password: string;
}

const [formState, input] = useFormState<FormFields>();

formState.fieldThatDoesNotExists // will throw a compiler error

📦 Other Changes

• Proofread README.md file (#58)

A special thanks to all the contributors that helped make this release possible! 🙇‍♂️

• @jwalton
• @danielbuechele
• @dimaqq