0.2.0

This release focused on removing rerenders caused by initial values:

Previously when using a hook like useIsValid it would temporarily return a default value, and then immediately update with the actual value. Now all state is tracked synchronously, so when calling these kind of hooks, the actual value will already be there.

BREAKING CHANGES

• keySelectors can only be used to target fields (on v0.1 it could target also groups of fields). This means:
  • setFieldValue can only be used to set the value of a specific field. If you need to set the value for all the form, use setFormValue instead.
  • useWatch can only be used to watch the value of a specific field. If you need more than one field, use useFormChanges instead.
• Nested values in initialState are treated as single fields by default. For example, in this case:

const initialCurrency = {
   name: 'USD',
   symbol: '$'
}

const form = useForm({
  initialValue: {
    amount: 5,
    currency: initialCurrency
  }
})

currency will be treated as the value for a single field with its key currency and value an object { name: string, symbol: string }, meaning you can't create fields that target the properties currency.name or currency.symbol.

If you want to use subproperties in your form model when using the initialValue option, you can use the function subfield:

import { subfield, useForm } from 'formicary';

/* ... */

const form = useForm({
  initialValue: {
    amount: 5,
    currency: subfield({
      name: 'USD',
      symbol: '$'
    })
  }
})

New Features

• useFormChanges(form, mapFn, eqFn?): returns the value of mapFn: a function that receives the form model every time it changes, but only rerenders the component if the value returned by mapFn changes. eqFn defaults to strict equality.
• readField(form, keySelector): Gets the last value for a specific field.