Skip to content
This repository has been archived by the owner on Jul 27, 2022. It is now read-only.

Commit

Permalink
docs(readme): update example
Browse files Browse the repository at this point in the history
  • Loading branch information
wellyshen committed Nov 22, 2020
1 parent 76e99e9 commit d6d254e
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/lovely-donkeys-laugh.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-cool-form": patch
---

docs(readme): update example
35 changes: 33 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ To use `react-cool-form`, you must use `[email protected]` or greater which includes

You can install this package via [npm](https://www.npmjs.com/package/react-cool-form).

```bash
```sh
$ yarn add react-cool-form
# or
$ npm install --save react-cool-form
Expand All @@ -36,7 +36,7 @@ Here's the basic example of how does it works, I'll provide the full documentati

[![Edit useForm - basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-cool-form-basic-gb0dj?fontsize=14&hidenavigation=1&theme=dark)

```javascript
```js
import { useForm } from "react-cool-form";

const defaultValues = {
Expand Down Expand Up @@ -80,4 +80,35 @@ const App = () => {
};
```

The form state of the above example will look something like this:

```json
{
"values": {
"name": "Welly",
"email": "[email protected]",
"password": "12345"
},
"touched": {
"name": true,
"email": true,
"password": true
},
"isValidating": false,
"isValid": false,
"errors": {
"password": "Please lengthen this text to 8 characters or more"
},
"isDirty": true,
"dirtyFields": {
"name": true,
"email": true,
"password": true
},
"isSubmitting": false,
"isSubmitted": false,
"submitCount": 1
}
```

Super easy right? The above example is just the tip of the iceberg. `react-cool-form` is a lightweight and powerful form library, you can visit the [type definition](https:/wellyshen/react-cool-form/blob/master/src/types/react-cool-form.d.ts) to understand how it rocks 🤘🏻.

0 comments on commit d6d254e

Please sign in to comment.