Skip to content

Commit

Permalink
[react-use-form]: Update README with information about field helper m…
Browse files Browse the repository at this point in the history
…ethods. (#20)

* Update README with details on field() helper methods

* formatting

* add a bit more detail to the field() docs
  • Loading branch information
jcarver989 committed Jan 22, 2021
1 parent f48f7fd commit 89cd000
Showing 1 changed file with 34 additions and 4 deletions.
38 changes: 34 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Just specify your object's shape + validation rules and `useForm` gives you a `f

```TSX
import React from 'react'
import { useForm, field, Field } from "@ginger.io/react-use-form"
import { useForm, stringField, field, Field } from "@ginger.io/react-use-form"

type Person = {
name: string
Expand All @@ -29,10 +29,10 @@ type Address = {

function PersonForm(props: {}) {
const { fields, validate, getValue } = useForm<Person>({
name: field(),
phone: field(),
name: stringField(),
phone: stringField()
address: {
street: field(),
street: stringField(),
zip: field({
rules: [
zip => (zip.toString().length === 5 ? undefined : 'Invalid zip code')
Expand Down Expand Up @@ -169,3 +169,33 @@ useForm({
Note: If you pass a fully formed object to seed your form values, those object's values will supersede
any field-level default values you've specified. This is desireable for the intended usecase of loading
a pre-existing entity/draft into your form.

### Field helper functions

React useForm provides a handful of convenience methods to construct fields for common default values:

#### field()

A generic field whose default value is `undefined` (unless overridden by passing the `default:` parameter shown in the previous section). For cases where you want a default value that is not `undefined`, see the other helper methods below (or just pass the `default:` option).

#### stringField()

A string field whose default value is `""`.

React input components often expect their "empty" state to be the empty string instead of `undefined`. In those cases, you'll want to use this helper over the more generic `field()` helper.

#### booleanField()

A boolean field whose default value is `false`.

#### numberField()

A number field whose default value is `0`.

#### arrayField()

An array field whose default value is `[]`.

#### nonEmptyArrayField()

An array field whose default value is `[]`, but has a validation rule attached that shows an error if the array is empty when validation on this field is triggered.

0 comments on commit 89cd000

Please sign in to comment.