Showing preview only (611K chars total). Download the full file or copy to clipboard to get everything.
Repository: wellyshen/react-cool-form
Branch: master
Commit: 24de7b80ee48
Files: 271
Total size: 548.3 KB
Directory structure:
gitextract_9m26ufpr/
├── .all-contributorsrc
├── .changeset/
│ ├── README.md
│ └── config.json
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── feature_request.md
│ │ └── question.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ └── workflows/
│ ├── codeql-analysis.yml
│ ├── release.yml
│ ├── size.yml
│ └── tests.yml
├── .gitignore
├── .husky/
│ ├── pre-commit
│ └── pre-push
├── .nvmrc
├── .prettierignore
├── .vscode/
│ ├── launch.json
│ └── settings.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── app/
│ ├── .eslintignore
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── .prettierignore
│ ├── .stylelintrc.js
│ ├── README.md
│ ├── package.json
│ ├── public/
│ │ ├── index.html
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src/
│ │ ├── App/
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── Automation/
│ │ │ └── index.tsx
│ │ ├── Playground/
│ │ │ └── index.tsx
│ │ ├── index.tsx
│ │ ├── react-app-env.d.ts
│ │ └── types/
│ │ └── index.d.ts
│ └── tsconfig.json
├── babel.config.json
├── bundlesize.config.json
├── docs/
│ ├── api-reference/
│ │ ├── use-controlled.md
│ │ ├── use-field-array.md
│ │ ├── use-form-methods.md
│ │ ├── use-form-state.md
│ │ ├── use-form.md
│ │ └── utility-functions.md
│ ├── examples/
│ │ ├── arrays-and-lists.md
│ │ ├── basic.md
│ │ ├── built-in-validation.md
│ │ ├── checkboxes.md
│ │ ├── complex-strcutures.md
│ │ ├── conditional-fields.md
│ │ ├── custom-field.md
│ │ ├── field-level-validation.md
│ │ ├── form-level-validation.md
│ │ ├── form-submission.md
│ │ ├── isolating-rerendering.md
│ │ ├── lazy-default-values.md
│ │ ├── material-ui.md
│ │ ├── multi-select.md
│ │ ├── radio-group.md
│ │ ├── react-select.md
│ │ ├── reset-form.md
│ │ ├── validation-with-schema.md
│ │ ├── virtualized-lists.md
│ │ ├── without-form-element.md
│ │ └── wizard-form.md
│ └── getting-started/
│ ├── 3rd-party-ui-libraries.md
│ ├── accessibility.md
│ ├── arrays-and-lists.md
│ ├── bundle-size-overview.md
│ ├── complex-structures.md
│ ├── form-state.md
│ ├── form-submission.md
│ ├── getting-started.md
│ ├── integration-an-existing-form.md
│ ├── reset-form.md
│ ├── typescript-support.md
│ └── validation-guide.md
├── examples/
│ ├── README.md
│ ├── arrays-and-lists/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── basic/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── built-in-validation/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── checkboxes/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── complex-structures/
│ │ ├── .codesandbox/
│ │ │ └── workspace.json
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── conditional-fields/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── custom-field/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── field-level-validation/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── form-level-validation/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── form-submission/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── isolating-rerendering/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── joi/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── lazy-default-values/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── material-ui/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── multi-select/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── quick-start/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── radio-group/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── react-select/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── reset-form/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── showbox/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── typescript/
│ │ ├── index.tsx
│ │ ├── package.json
│ │ └── styles.scss
│ ├── without-form-element/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── wizard-form/
│ │ ├── .codesandbox/
│ │ │ └── workspace.json
│ │ ├── Step1.js
│ │ ├── Step2.js
│ │ ├── Step3.js
│ │ ├── formValues.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ └── yup/
│ ├── index.js
│ ├── package.json
│ └── styles.scss
├── package.json
├── scripts/
│ ├── jest/
│ │ ├── config.js
│ │ └── setup.ts
│ └── rollup/
│ ├── cjsEntryFile.js
│ ├── config.js
│ └── createConfig.js
├── src/
│ ├── hooks/
│ │ ├── index.ts
│ │ ├── useLatest.test.ts
│ │ ├── useLatest.ts
│ │ ├── useState.test.ts
│ │ └── useState.ts
│ ├── index.ts
│ ├── shared.test.ts
│ ├── shared.ts
│ ├── types/
│ │ ├── global.d.ts
│ │ ├── index.ts
│ │ └── react-cool-form.d.ts
│ ├── useControlled.test.tsx
│ ├── useControlled.ts
│ ├── useFieldArray.test.tsx
│ ├── useFieldArray.ts
│ ├── useForm.test.tsx
│ ├── useForm.ts
│ ├── useFormMethods.test.tsx
│ ├── useFormMethods.ts
│ ├── useFormState.test.tsx
│ ├── useFormState.ts
│ └── utils/
│ ├── arrayToMap.test.ts
│ ├── arrayToMap.ts
│ ├── cloneObject.test.ts
│ ├── cloneObject.ts
│ ├── compact.test.ts
│ ├── compact.ts
│ ├── deepMerge.test.ts
│ ├── deepMerge.ts
│ ├── filterErrors.test.ts
│ ├── filterErrors.ts
│ ├── get.test.ts
│ ├── get.ts
│ ├── getIsDirty.test.ts
│ ├── getIsDirty.ts
│ ├── getPath.test.ts
│ ├── getPath.ts
│ ├── index.ts
│ ├── invariant.test.ts
│ ├── invariant.ts
│ ├── isAsyncFunction.test.ts
│ ├── isAsyncFunction.ts
│ ├── isCheckboxInput.test.ts
│ ├── isCheckboxInput.ts
│ ├── isEmptyObject.test.ts
│ ├── isEmptyObject.ts
│ ├── isFieldArray.test.ts
│ ├── isFieldArray.ts
│ ├── isFieldElement.test.ts
│ ├── isFieldElement.ts
│ ├── isFileInput.test.ts
│ ├── isFileInput.ts
│ ├── isFileList.ts
│ ├── isFunction.test.ts
│ ├── isFunction.ts
│ ├── isInputElement.test.ts
│ ├── isInputElement.ts
│ ├── isNumberInput.test.ts
│ ├── isNumberInput.ts
│ ├── isObject.test.ts
│ ├── isObject.ts
│ ├── isPlainObject.test.ts
│ ├── isPlainObject.ts
│ ├── isRadioInput.test.ts
│ ├── isRadioInput.ts
│ ├── isRangeInput.test.ts
│ ├── isRangeInput.ts
│ ├── isSelectMultiple.test.ts
│ ├── isSelectMultiple.ts
│ ├── isSelectOne.test.ts
│ ├── isSelectOne.ts
│ ├── isUndefined.test.ts
│ ├── isUndefined.ts
│ ├── parseState.test.ts
│ ├── parseState.ts
│ ├── runWithLowPriority.test.ts
│ ├── runWithLowPriority.ts
│ ├── set.test.ts
│ ├── set.ts
│ ├── setValuesAsTrue.test.ts
│ ├── setValuesAsTrue.ts
│ ├── stringToPath.test.ts
│ ├── stringToPath.ts
│ ├── unset.test.ts
│ ├── unset.ts
│ ├── warn.test.ts
│ └── warn.ts
├── tsconfig.json
└── website/
├── .gitignore
├── .prettierignore
├── README.md
├── babel.config.js
├── docusaurus.config.js
├── package.json
├── sidebars.js
├── src/
│ ├── css/
│ │ └── custom.scss
│ └── pages/
│ ├── index.js
│ └── styles.module.scss
└── static/
└── .nojekyll
================================================
FILE CONTENTS
================================================
================================================
FILE: .all-contributorsrc
================================================
{
"files": [
"README.md"
],
"imageSize": 100,
"commit": false,
"contributors": [
{
"login": "wellyshen",
"name": "Welly",
"avatar_url": "https://avatars.githubusercontent.com/u/21308003?v=4",
"profile": "http://wellyshen.com",
"contributions": [
"ideas",
"code",
"doc",
"infra",
"maintenance"
]
},
{
"login": "Chris-James",
"name": "Chris",
"avatar_url": "https://avatars.githubusercontent.com/u/4596428?v=4",
"profile": "https://github.com/Chris-James",
"contributions": [
"bug"
]
}
],
"contributorsPerLine": 7,
"projectName": "react-cool-form",
"projectOwner": "wellyshen",
"repoType": "github",
"repoHost": "https://github.com",
"skipCi": true
}
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@1.7.0/schema.json",
"changelog": [
"@changesets/changelog-github",
{ "repo": "wellyshen/react-cool-form" }
],
"commit": false,
"linked": [],
"access": "public",
"baseBranch": "master",
"updateInternalDependencies": "patch",
"ignore": []
}
================================================
FILE: .eslintignore
================================================
dist
scripts/rollup
app
examples
website
================================================
FILE: .eslintrc.js
================================================
module.exports = {
extends: ["welly"],
rules: {
eqeqeq: "off",
camelcase: "off",
"no-shadow": "off",
"no-console": [
"warn",
{
allow: ["warn", "error"],
},
],
"no-param-reassign": "off",
"no-underscore-dangle": "off",
"no-sparse-arrays": "off",
"no-restricted-syntax": "off",
"react/react-in-jsx-scope": "off",
"react/require-default-props": "off",
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"testing-library/render-result-naming-convention": "off",
},
settings: {
polyfills: ["Promise"],
},
};
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: react-cool-form
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: "\U0001F41B Bug Report"
about: Create a report to help us improve
title: ""
labels: ""
assignees: ""
---
# Bug Report
## Describe the Bug
A clear and concise description of what the bug is.
## How to Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
1. Go to '....'
2. Click on '....'
3. See error
## CodeSandbox Link
Show me the bug on [CodeSandbox](https://codesandbox.io).
## Expected Behavior
Tell me what should happen.
## Screenshots
Add screenshots to help explain your problem.
## Your Environment
- Device: [e.g. MacBook Pro, iPhone12]
- OS: [e.g. macOS, iOS, Windows]
- Browser: [e.g. Chrome, Safari]
- Version: [e.g. v1.0.0]
## Additional Information
Any other information about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: "\U0001F4A1 Feature Request"
about: Suggest an idea for this project
title: ""
labels: ""
assignees: ""
---
# Feature Request
## Describe the Feature
A clear and concise description of what you want and what your use case is.
## Describe the Solution You'd Like
A clear and concise description of what you want to happen.
## Describe Alternatives You've Considered
A clear and concise description of any alternative solutions or features you've considered.
## Additional Information
Any other information about the feature here.
================================================
FILE: .github/ISSUE_TEMPLATE/question.md
================================================
---
name: "\U0001F914 Questions and Help"
about: This issue tracker is not for questions. Please ask questions at https://stackoverflow.com/questions/tagged/react.
title: ""
labels: ""
assignees: ""
---
GitHub Issues are reserved for Bug reports and Feature requests. Support requests that are created as issues are likely to be closed. We want to make sure you are able to find the help you seek. Please take a look at the following resources.
## Coding Questions
If you have a coding question related to React, it might be better suited for Stack Overflow. It's a great place to browse through frequent questions about using React, as well as ask for help with specific questions.
https://stackoverflow.com/questions/tagged/react
## Support Forums
There are many online forums which are a great place for discussion about best practices and application architecture.
https://reactjs.org/community/support.html#popular-discussion-forums
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--
Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!
Before submitting a pull request, please make sure you're familiar with and follow the instructions in the contributing guidelines (found in the CONTRIBUTING.md file).
Also, please make sure you're familiar with and follow the instructions in the contributing guidelines (found in the CONTRIBUTING.md file).
If you're new to contributing to open source projects, you might find this free video course helpful: https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github
Please fill out the information below to expedite the review and (hopefully) merge of your pull request!
-->
## What
What changes are being made? (e.g. feature, bug, docs, etc.)
## Why
Why are these changes necessary?
## How
How were these changes implemented?
## Checklist
Have you done all of these things?
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [ ] [Documentation](https://github.com/wellyshen/react-cool-form/tree/master/docs) added
- [ ] Tests
- [ ] TypeScript definitions updated
- [ ] [Add a changeset](https://github.com/atlassian/changesets/blob/master/docs/adding-a-changeset.md)
- [ ] Ready to be merged
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: npm
directory: "/"
schedule:
interval: daily
time: "21:00"
open-pull-requests-limit: 10
ignore:
- dependency-name: "@changesets/changelog-github"
versions:
- 0.3.0
- 0.4.0
- dependency-name: "@rollup/plugin-commonjs"
versions:
- 18.0.0
- dependency-name: husky
versions:
- 5.0.9
- 5.1.1
- 6.0.0
- dependency-name: rollup
versions:
- 2.40.0
- 2.42.4
- dependency-name: "@testing-library/user-event"
versions:
- 13.0.0
- 13.0.1
- 13.0.2
- 13.0.3
- 13.0.6
- 13.0.7
================================================
FILE: .github/workflows/codeql-analysis.yml
================================================
name: "CodeQL"
on:
push:
branches: [master]
pull_request:
branches: [master]
schedule:
# ┌───────────── minute (0 - 59)
# │ ┌───────────── hour (0 - 23)
# │ │ ┌───────────── day of the month (1 - 31)
# │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)
# │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
# │ │ │ │ │
# │ │ │ │ │
# │ │ │ │ │
# * * * * *
- cron: "40 18 * * 1"
jobs:
CodeQL-Build:
# CodeQL runs on ubuntu-latest, windows-latest, and macos-latest
runs-on: ubuntu-latest
permissions:
# required for all workflows
security-events: write
# only required for workflows in private repositories
actions: read
contents: read
steps:
- name: Checkout repository
uses: actions/checkout@v3
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v2
# Override language selection by uncommenting this and choosing your languages
with:
languages: javascript
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below).
- name: Autobuild
uses: github/codeql-action/autobuild@v2
# ℹ️ Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
# ✏️ If the Autobuild fails above, remove it and uncomment the following
# three lines and modify them (or add more) to build your code if your
# project uses a compiled language
#- run: |
# make bootstrap
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
branches:
- master
jobs:
release:
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v3
- name: Setup Node.js 16
uses: actions/setup-node@v3
with:
node-version: 16
- name: Install Dependencies
run: yarn
- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@v1
with:
# This expects you to have a script called release which does a build for your packages and calls changeset publish
publish: yarn release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
================================================
FILE: .github/workflows/size.yml
================================================
name: Compressed Size
on: [pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: preactjs/compressed-size-action@v2
with:
repo-token: "${{ secrets.GITHUB_TOKEN }}"
build-script: "build:prod"
================================================
FILE: .github/workflows/tests.yml
================================================
name: Lint / Test / Size
on:
push:
branches:
- master
tags-ignore:
- "**"
pull_request:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node: [16]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- uses: actions/cache@v3
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Run lint
run: yarn lint
- name: Run test
run: yarn test:cov
- name: Run size limit
run: yarn size
- name: Coveralls GitHub Action
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
================================================
FILE: .gitignore
================================================
# dependencies
node_modules
# testing
coverage
# production
dist
# misc
.size-snapshot.json
.DS_Store
*.log
================================================
FILE: .husky/pre-commit
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn lint-staged
================================================
FILE: .husky/pre-push
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn test
yarn size
================================================
FILE: .nvmrc
================================================
lts/*
================================================
FILE: .prettierignore
================================================
dist
coverage
app
examples
website
*.log
.size-snapshot.json
================================================
FILE: .vscode/launch.json
================================================
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"typescript.tsdk": "node_modules/typescript/lib"
}
================================================
FILE: CHANGELOG.md
================================================
# react-cool-form
## 0.4.1
### Patch Changes
- [#697](https://github.com/wellyshen/react-cool-form/pull/697) [`87eb83e`](https://github.com/wellyshen/react-cool-form/commit/87eb83e32aa11c0ddc6d87e3b5ba1e53886ed622) Thanks [@wellyshen](https://github.com/wellyshen)! - fix: `reset` method not working
## 0.4.0
### Minor Changes
- [#654](https://github.com/wellyshen/react-cool-form/pull/654) [`291199a`](https://github.com/wellyshen/react-cool-form/commit/291199a021e6ae81af5bb5b79b77ac1f27f8b511) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): add `shouldFocus` option for `runValidation` method
## 0.3.1
### Patch Changes
- [#640](https://github.com/wellyshen/react-cool-form/pull/640) [`61e1d53`](https://github.com/wellyshen/react-cool-form/commit/61e1d533e3d51fff33cbd91997adf280167fb7fc) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(types): use `RefObject` as the type of `form` method
## 0.3.0
### Minor Changes
- [#633](https://github.com/wellyshen/react-cool-form/pull/633) [`bcb718a`](https://github.com/wellyshen/react-cool-form/commit/bcb718add9b21c49e6832b037e0e913d9c096c6c) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): turn the `shouldValidate` parameter of `setTouched` to object for the purpose of API consistency
## 0.2.2
### Patch Changes
- [#619](https://github.com/wellyshen/react-cool-form/pull/619) [`8807efd`](https://github.com/wellyshen/react-cool-form/commit/8807efd0a3fea05e870c10a4ea22546f5f85a1fc) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(types): export more types
## 0.2.1
### Patch Changes
- [#615](https://github.com/wellyshen/react-cool-form/pull/615) [`712bb21`](https://github.com/wellyshen/react-cool-form/commit/712bb21736bdc5990c38e1f822812f2b20081bea) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(types): use overloads for the type of `useFormState` and the `field` method of `useForm`
## 0.2.0
### Minor Changes
- [#610](https://github.com/wellyshen/react-cool-form/pull/610) [`072da4b`](https://github.com/wellyshen/react-cool-form/commit/072da4b842d741e022ba2125528095e624c0f3d4) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): rename `mon` to `use`
## 0.0.171
### Patch Changes
- [#572](https://github.com/wellyshen/react-cool-form/pull/572) [`2401051`](https://github.com/wellyshen/react-cool-form/commit/2401051c8128ffd8a17468bd8ec1f9ed0bf5b281) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(form-state): reset `isSubmitted` state when the user attempts to submnit the form
## 0.0.170
### Patch Changes
- [#570](https://github.com/wellyshen/react-cool-form/pull/570) [`21bac87`](https://github.com/wellyshen/react-cool-form/commit/21bac870b3063a6f6c8ee976d07a6b07e2192bd9) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): rename `debug` event to `onStateChange`
## 0.0.169
### Patch Changes
- [#568](https://github.com/wellyshen/react-cool-form/pull/568) [`d6bcac6`](https://github.com/wellyshen/react-cool-form/commit/d6bcac62266057f71bac0ceedaf731f3a62aea70) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): new `removeOnUnmounted` option
## 0.0.168
### Patch Changes
- [`35516ad`](https://github.com/wellyshen/react-cool-form/commit/35516ad867efb6d1314a2580af360f9143423775) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): reset values not working for conditional fields
* [`c865f58`](https://github.com/wellyshen/react-cool-form/commit/c865f58504e416ccd55b4b2022f3092c1c841c80) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: remove "missing field name" warnings
## 0.0.167
### Patch Changes
- [#565](https://github.com/wellyshen/react-cool-form/pull/565) [`f1796dd`](https://github.com/wellyshen/react-cool-form/commit/f1796dd459f641544f0365ff6e4d331f8d5c45d7) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): reset form will cause `undefined` form values
## 0.0.166
### Patch Changes
- [#562](https://github.com/wellyshen/react-cool-form/pull/562) [`310cecf`](https://github.com/wellyshen/react-cool-form/commit/310cecf66a658c615f38e3b243c0491321189ffc) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): automatically remove array fields getting wrong form values
## 0.0.164
### Patch Changes
- [#555](https://github.com/wellyshen/react-cool-form/pull/555) [`546645a`](https://github.com/wellyshen/react-cool-form/commit/546645a9945092582237e47c28040e54716a7821) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useControlled): value not updated when working with conditional fields and setting default value from `defaultValue` option
* [#553](https://github.com/wellyshen/react-cool-form/pull/553) [`6b33570`](https://github.com/wellyshen/react-cool-form/commit/6b33570e999ccd8e445aa227dbea386f3e3ec0d8) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useControlled): sync field value with its default value for a conditional field
- [#556](https://github.com/wellyshen/react-cool-form/pull/556) [`b3edba8`](https://github.com/wellyshen/react-cool-form/commit/b3edba847372e8a7baf556bf78c71c1d25eba738) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useControlled): do not update default value when working with field-array
## 0.0.163
### Patch Changes
- [#551](https://github.com/wellyshen/react-cool-form/pull/551) [`e285de3`](https://github.com/wellyshen/react-cool-form/commit/e285de3f1e3d96cda611d4cd0b6992ae49c74dcb) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: reduce bundle size
## 0.0.162
### Patch Changes
- [#549](https://github.com/wellyshen/react-cool-form/pull/549) [`b1cfeae`](https://github.com/wellyshen/react-cool-form/commit/b1cfeaea9d43d037d467789ff9c9db45e8cd6724) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): new `removeField` API
## 0.0.161
### Patch Changes
- [#542](https://github.com/wellyshen/react-cool-form/pull/542) [`2e008df`](https://github.com/wellyshen/react-cool-form/commit/2e008dfc3cd933249eebe3d1c9e8f5203383e3e6) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: reduce bundle size
## 0.0.160
### Patch Changes
- [`2a18eca`](https://github.com/wellyshen/react-cool-form/commit/2a18eca80cf9ed0ec6c2cd9d6c479c0ea1c52449) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): reduce re-rendering times when a field un-mounted
* [`088842d`](https://github.com/wellyshen/react-cool-form/commit/088842d2d825893b3246d9d381ef2b7b7071a04c) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFormState): unsubscribe the hook when the component is unmounted
- [`3fb100e`](https://github.com/wellyshen/react-cool-form/commit/3fb100e263cae996acc28e87d611434f5a862836) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): `mon("submitCount")` not triggering re-rendering
## 0.0.159
### Patch Changes
- [`f457e82`](https://github.com/wellyshen/react-cool-form/commit/f457e829256e85400212fddf3d3697cfbd3541f8) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useControlled): form-level default value might not working with conditional fields
* [`b3ec2f7`](https://github.com/wellyshen/react-cool-form/commit/b3ec2f7c105b53922ded53d84deffd8d0eaf012b) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): reduce bundle size
- [`b31f0a2`](https://github.com/wellyshen/react-cool-form/commit/b31f0a2a3b18f0cd8c51e761379a62f02935e464) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): should remove form-level default value for conditional fields
* [`b2d04e8`](https://github.com/wellyshen/react-cool-form/commit/b2d04e89197d0b38b255f06b9274a90025239014) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): when multiple `mon` method are using, only the latest one can work
## 0.0.158
### Patch Changes
- [#536](https://github.com/wellyshen/react-cool-form/pull/536) [`ed0a7a6`](https://github.com/wellyshen/react-cool-form/commit/ed0a7a62cb9437a29e05012f1806a74f0f3f3e63) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): when dynamically hidding a field `getState` method will get default value
## 0.0.157
### Patch Changes
- [#535](https://github.com/wellyshen/react-cool-form/pull/535) [`7491432`](https://github.com/wellyshen/react-cool-form/commit/749143284089fe956efbaab9de2d3869dabd4430) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): deprecate the `shouldFocus` parameter of `runValidation` API
* [`341aa21`](https://github.com/wellyshen/react-cool-form/commit/341aa214d02dd7de8834827b4c3158d7e1acefb8) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: refine the warning of getting `values` only
- [`9dc4993`](https://github.com/wellyshen/react-cool-form/commit/9dc4993824083c9086927281135fb9265fd3936e) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useFormState): code refactor for smaller bundle size
## 0.0.156
### Patch Changes
- [#530](https://github.com/wellyshen/react-cool-form/pull/530) [`62762d0`](https://github.com/wellyshen/react-cool-form/commit/62762d09701265ac5e8c68ffaade17dd37295e63) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFormState): `errorWithTouched` option not works in some cases
* [#529](https://github.com/wellyshen/react-cool-form/pull/529) [`dc35110`](https://github.com/wellyshen/react-cool-form/commit/dc35110c7f93aa09d3d7cbaf672282a29c21699f) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): add `shouldFocus` for `runValidation` API
- [#532](https://github.com/wellyshen/react-cool-form/pull/532) [`4c6fe9e`](https://github.com/wellyshen/react-cool-form/commit/4c6fe9ece87304ab2baa0db627176e7060f9e685) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): do not warn missing name when excluding a field via data attribute
## 0.0.155
### Patch Changes
- [#527](https://github.com/wellyshen/react-cool-form/pull/527) [`10af065`](https://github.com/wellyshen/react-cool-form/commit/10af065a4ce4de597fbce2a5f68923f68c330021) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): delay = 0 is acceptable by `focus` method
## 0.0.154
### Patch Changes
- [#519](https://github.com/wellyshen/react-cool-form/pull/519) [`5539448`](https://github.com/wellyshen/react-cool-form/commit/5539448c8c7ee1fedd19d12cb79d909fcf781fa4) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): new `setFocus` API
* [`06e66f3`](https://github.com/wellyshen/react-cool-form/commit/06e66f38de31ebf335dd04543a5a118e1202d18a) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): when working with nested fields, built-in validation results are overrided
## 0.0.153
### Patch Changes
- [`7de1f62`](https://github.com/wellyshen/react-cool-form/commit/7de1f62fb3b03d1aef8a5fe7041fedf1a48931fe) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs(readme): add arrays-and-lists feature
* [#518](https://github.com/wellyshen/react-cool-form/pull/518) [`cf7980f`](https://github.com/wellyshen/react-cool-form/commit/cf7980f72790bc6f5a95192fff629ec909ab38ad) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): when running field validation with nested field(s), error results will be overrided by the last field
- [`c2459ee`](https://github.com/wellyshen/react-cool-form/commit/c2459eebbd18fd2cdbf58aa3552d51cbc650c5c0) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(types): rename `Map` to `ObjMap`
## 0.0.152
### Patch Changes
- [`642650c`](https://github.com/wellyshen/react-cool-form/commit/642650c610893f65a83cd384a06bff1d82b5f4ba) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): avoid touched and dirty values are set at negative index when using `push` method
## 0.0.151
### Patch Changes
- [`d914de6`](https://github.com/wellyshen/react-cool-form/commit/d914de63a527a5188afd0ba0ea7203dcd9fd17cb) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): field value not displayed when setting default value via `useFieldArray` hook
## 0.0.150
### Patch Changes
- [`98cd462`](https://github.com/wellyshen/react-cool-form/commit/98cd46202296b720dff48352fd90d418596599b4) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs(readme): update features section
* [`cd8755b`](https://github.com/wellyshen/react-cool-form/commit/cd8755b265b6ec592312cb2690f18650ee1919de) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): correct form ID warning message
## 0.0.149
### Patch Changes
- [`bfab667`](https://github.com/wellyshen/react-cool-form/commit/bfab667e915f33ceb974195bf7cc12e10cde4be1) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat: new on form-state change event mode for `useFormState` hook
## 0.0.148
### Patch Changes
- [#499](https://github.com/wellyshen/react-cool-form/pull/499) [`38cfd17`](https://github.com/wellyshen/react-cool-form/commit/38cfd17cd6b79345652a88ede0329ec328674139) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useFieldArray): provide simpler API
## 0.0.147
### Patch Changes
- [#494](https://github.com/wellyshen/react-cool-form/pull/494) [`40e9b76`](https://github.com/wellyshen/react-cool-form/commit/40e9b76e74b2740fd8e6c309353bf9e77127998e) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat: shortcut for getting form's values
* [#492](https://github.com/wellyshen/react-cool-form/pull/492) [`4f0dbaf`](https://github.com/wellyshen/react-cool-form/commit/4f0dbaf6610bad9977b474b92e158c0d83227755) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): throw multiple warning when getting form values with `mon` method
## 0.0.146
### Patch Changes
- [`68b340a`](https://github.com/wellyshen/react-cool-form/commit/68b340a93188b23fd22303e7c097770be7b0cc56) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): correct the type of return values
## 0.0.145
### Patch Changes
- [#489](https://github.com/wellyshen/react-cool-form/pull/489) [`1eee601`](https://github.com/wellyshen/react-cool-form/commit/1eee601ef0b121387e1744290b0c62d62c0c277d) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): fields not updated by helper methods
## 0.0.144
### Patch Changes
- [#487](https://github.com/wellyshen/react-cool-form/pull/487) [`2d70034`](https://github.com/wellyshen/react-cool-form/commit/2d70034f2d4b8c9b4dd11a55eac42e1e19b3e41b) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useFieldArray): better API for fixing the side-effect of React keys and lists
## 0.0.143
### Patch Changes
- [`4f9ae54`](https://github.com/wellyshen/react-cool-form/commit/4f9ae542010d413b1bc466a99b7c479249e39b2e) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): reset fields not working properly
* [`c5a700f`](https://github.com/wellyshen/react-cool-form/commit/c5a700f26004f5c7ec5772eb7578bfd6cff5cee4) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): reserve the default value of field-array from `removeField` method
## 0.0.142
### Patch Changes
- [#481](https://github.com/wellyshen/react-cool-form/pull/481) [`90afddc`](https://github.com/wellyshen/react-cool-form/commit/90afddc7f61d76a891c0451410e383f8906f3c08) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): reset not working
* [#484](https://github.com/wellyshen/react-cool-form/pull/484) [`d5d68bc`](https://github.com/wellyshen/react-cool-form/commit/d5d68bcf7500caefc2faa3081bbdb46a6e9242be) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useControlled): controlled components not working with field-array
## 0.0.140
### Patch Changes
- [#474](https://github.com/wellyshen/react-cool-form/pull/474) [`b6f7589`](https://github.com/wellyshen/react-cool-form/commit/b6f758990a59969c947158727a82789087f2566c) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): rename `select` method to `watch` for better understanding
* [#474](https://github.com/wellyshen/react-cool-form/pull/474) [`3cdcd1b`](https://github.com/wellyshen/react-cool-form/commit/3cdcd1bd3a6c2bcdaab69846ac60f9c02ef597cf) Thanks [@wellyshen](https://github.com/wellyshen)! - Change `select` method to `mon` (a.k.a monitor)
- [`2d0ba41`](https://github.com/wellyshen/react-cool-form/commit/2d0ba41c00036ed1526c8d92cff7dcd25cbfd0d7) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): wrong form values due to automatically remove a field
## 0.0.139
### Patch Changes
- [`9bb9992`](https://github.com/wellyshen/react-cool-form/commit/9bb9992c666d52c17ce929d7d273b2fd885766b3) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: refine warning messages
## 0.0.138
### Patch Changes
- [`889e331`](https://github.com/wellyshen/react-cool-form/commit/889e3319d5f064607cef4dec42a3e5fb32cdadb4) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(utils): the side-effect of `cloneObject`
## 0.0.137
### Patch Changes
- [`d808960`](https://github.com/wellyshen/react-cool-form/commit/d80896022c8322dfe4aed5facc57b40874151a82) [#466](https://github.com/wellyshen/react-cool-form/pull/466) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): `isDirty` not working with array type form values
## 0.0.136
### Patch Changes
- [`c066ecc`](https://github.com/wellyshen/react-cool-form/commit/c066ecc5004d6b29d9d649a41f99290d5f52234f) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: reduce bundle size
## 0.0.135
### Patch Changes
- [`c4724a0`](https://github.com/wellyshen/react-cool-form/commit/c4724a04a1d60c767f501bc74f35393e835c31d1) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): skip unnecessary set state logic for `reset` method
* [`573ab7b`](https://github.com/wellyshen/react-cool-form/commit/573ab7b6f29d2a7e9b503bd1cdaf772d903b5952) [#461](https://github.com/wellyshen/react-cool-form/pull/461) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): keep the value of a conditional field when `shouldRemoveField` option set to `false`'
- [`ae11590`](https://github.com/wellyshen/react-cool-form/commit/ae115903890ee8d1b8f8d79d4acb399a375244c6) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: refine missing "name" warnings
## 0.0.134
### Patch Changes
- [`742ac71`](https://github.com/wellyshen/react-cool-form/commit/742ac71d7f2126745c10c044427bd31e2edb5cf0) [#451](https://github.com/wellyshen/react-cool-form/pull/451) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): conditional `checkbox`, `radio`, and `select` not working properly
* [`cdf5808`](https://github.com/wellyshen/react-cool-form/commit/cdf580863bb0b9a096b7f6838040f7dd57f9eb37) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(utils): clear the redundant `empty` or `undefined` element(s) of an array
## 0.0.133
### Patch Changes
- [`6dc3cca`](https://github.com/wellyshen/react-cool-form/commit/6dc3ccaaae66b11e5069084610143f760a387fc1) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): clear the `empty` element from the array type of form values
## 0.0.132
### Patch Changes
- [`91cfe37`](https://github.com/wellyshen/react-cool-form/commit/91cfe37e794a1a6f1d4129c995598964173d39a9) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix: empty array values for `useForm` hook and `set` utility function
* [`ada163b`](https://github.com/wellyshen/react-cool-form/commit/ada163b04922341575a9b979530f31006bfb9203) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(types): enhance the readability of type
- [`d723cf0`](https://github.com/wellyshen/react-cool-form/commit/d723cf058cfab68a0c694b84553422617d2cafab) [#447](https://github.com/wellyshen/react-cool-form/pull/447) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(unset): remove the ancestry path of the unset property if needed
## 0.0.131
### Patch Changes
- [`0e14ea7`](https://github.com/wellyshen/react-cool-form/commit/0e14ea76ea61e7025cc76b84b37c64b9b70d7fdd) [#444](https://github.com/wellyshen/react-cool-form/pull/444) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat: when only on form hook is using, the form id is not required anymore
## 0.0.130
### Patch Changes
- [`723dceb`](https://github.com/wellyshen/react-cool-form/commit/723dcebb8f08fd3393ddcaa06ebf317c700ff337) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useControlled): use React.FocusEventHandler for the return props
## 0.0.129
### Patch Changes
- [`8ae1f76`](https://github.com/wellyshen/react-cool-form/commit/8ae1f76a065a94375e2bf0143f8adcd981a63230) [#436](https://github.com/wellyshen/react-cool-form/pull/436) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): single checkbox input with valid `value` attribute, the value will be a string array
## 0.0.128
### Patch Changes
- [`b3554f2`](https://github.com/wellyshen/react-cool-form/commit/b3554f28ed13e4d89ac437e42d4c370b1431ec09) [#433](https://github.com/wellyshen/react-cool-form/pull/433) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): add `id` and `class` for the `excludeFields` option
## 0.0.126
### Patch Changes
- [`fe7942d`](https://github.com/wellyshen/react-cool-form/commit/fe7942d36ee2410ad3be9dc74318836b850cb6cb) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): fix potential side-effect of the values of form state
## 0.0.125
### Patch Changes
- [`eb767bd`](https://github.com/wellyshen/react-cool-form/commit/eb767bd4758ebbec37efde3975c1eab822d2de6b) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): fix set default values side-effect
## 0.0.124
### Patch Changes
- [`ed388fb`](https://github.com/wellyshen/react-cool-form/commit/ed388fbd2691b91e1335e88bd5238bac36f3a76c) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useFormState): use error instead warn for form id related exceptions
## 0.0.123
### Patch Changes
- [`e7795c3`](https://github.com/wellyshen/react-cool-form/commit/e7795c30c36b26e402d4b07e458ee2f5f2617063) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFormState): correct the URL of warnings
## 0.0.122
### Patch Changes
- [`3f92f38`](https://github.com/wellyshen/react-cool-form/commit/3f92f3861baa7bfe51e1ba67525055c0ae97f09d) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat: new `useFormState` hook
## 0.0.121
### Patch Changes
- [`cc3eb6c`](https://github.com/wellyshen/react-cool-form/commit/cc3eb6c845ba540de38bc2cab9a708b5bbc6739f) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): add `false` type for form validator
## 0.0.120
### Patch Changes
- [`090f275`](https://github.com/wellyshen/react-cool-form/commit/090f27576174431f948c9a72ff3b8950b93d986c) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): do not unset subscribed state for conditional component
## 0.0.119
### Patch Changes
- [`d4c7258`](https://github.com/wellyshen/react-cool-form/commit/d4c7258382b2aa5e4f2937973e7c5f253caf5a73) [#405](https://github.com/wellyshen/react-cool-form/pull/405) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): should call `debug` on every state changed
* [`b0a5141`](https://github.com/wellyshen/react-cool-form/commit/b0a5141d589d1e82924e5f8b7eb4e8bee02bfbd6) [#403](https://github.com/wellyshen/react-cool-form/pull/403) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): do not trigger re-renders on reset if no any selected state
## 0.0.118
### Patch Changes
- [`1d4e794`](https://github.com/wellyshen/react-cool-form/commit/1d4e79401f92ee2f4060efdfa377d769b6ff9a86) [#397](https://github.com/wellyshen/react-cool-form/pull/397) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): `dirty` and `isDirty` state not work correctly with reference type values
## 0.0.117
### Patch Changes
- [`5797ca4`](https://github.com/wellyshen/react-cool-form/commit/5797ca447cb4024dd8f56e9b1e3afc6bef607b60) [#394](https://github.com/wellyshen/react-cool-form/pull/394) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): add "select" method
## 0.0.116
### Patch Changes
- [`645b5f4`](https://github.com/wellyshen/react-cool-form/commit/645b5f4269737f535735e73eea242bb3a48dfff7) [#391](https://github.com/wellyshen/react-cool-form/pull/391) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: refine types
## 0.0.115
### Patch Changes
- [`38f64a8`](https://github.com/wellyshen/react-cool-form/commit/38f64a8423dd6b3bb8fe4b61e139312c74e9a113) [#384](https://github.com/wellyshen/react-cool-form/pull/384) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): prevent errors from calling `e.preventDefault()` and `e.stopPropagation()` when using `submit` or `reset` methods
## 0.0.114
### Patch Changes
- [`87f7814`](https://github.com/wellyshen/react-cool-form/commit/87f7814bc6756254658938268d825533ae50c208) [#360](https://github.com/wellyshen/react-cool-form/pull/360) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useState): trigger `debug` callback whenever form state changed
## 0.0.113
### Patch Changes
- [`a90c405`](https://github.com/wellyshen/react-cool-form/commit/a90c405a4a84b69855afa808afc1ef5d85252977) [#350](https://github.com/wellyshen/react-cool-form/pull/350) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): should warn for missing field name
## 0.0.112
### Patch Changes
- [`841e904`](https://github.com/wellyshen/react-cool-form/commit/841e9043e3a387c48bdf617f6ea845dfa70b8f20) [#345](https://github.com/wellyshen/react-cool-form/pull/345) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): support non <form> element
## 0.0.111
### Patch Changes
- [`1d6d0ae`](https://github.com/wellyshen/react-cool-form/commit/1d6d0aea93eff883cec506376bfbbd8e3cd941de) [#341](https://github.com/wellyshen/react-cool-form/pull/341) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): conditional form not working
## 0.0.110
### Patch Changes
- [`26284c3`](https://github.com/wellyshen/react-cool-form/commit/26284c3007b3a64d5baa6eea0be3a792d0406e00) [#335](https://github.com/wellyshen/react-cool-form/pull/335) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): change `ignoreFields` to `excludeFields` & change `data-rcf-ignore` to `data-rcf-exclude`
* [`34b1eb5`](https://github.com/wellyshen/react-cool-form/commit/34b1eb5fa602fac2b9e84cc7aabb550cae135c5f) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): exclude "button" type from form fields parser
## 0.0.109
### Patch Changes
- [`facc86e`](https://github.com/wellyshen/react-cool-form/commit/facc86e086434aa158cd50e1ef1609254cbbb9d0) [#332](https://github.com/wellyshen/react-cool-form/pull/332) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): export `setDirty` method
* [`649c03d`](https://github.com/wellyshen/react-cool-form/commit/649c03d8a5ccff33ac418414743e02493c350d67) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(utils): correct the logic of merging `object` with `array`
- [`05cb324`](https://github.com/wellyshen/react-cool-form/commit/05cb324223e7fd9a2445253a93e2d491be96caee) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): code refactor for `setTouched`
* [`68ccf7f`](https://github.com/wellyshen/react-cool-form/commit/68ccf7fd1ee7c91873986b824f19dace2b2b70fe) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(utils): exclude `Date` from `isPlainObject`
## 0.0.108
### Patch Changes
- [`3d37b97`](https://github.com/wellyshen/react-cool-form/commit/3d37b9731d5e52e384806ffa8030ed2cbe6f4d93) [#329](https://github.com/wellyshen/react-cool-form/pull/329) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(utils): correct the logic of `unset`
## 0.0.107
### Patch Changes
- [`64eccdb`](https://github.com/wellyshen/react-cool-form/commit/64eccdbe358d96e932cec6a74e45ad03e31af7a5) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs(readme): add demo gif
* [`db18bfa`](https://github.com/wellyshen/react-cool-form/commit/db18bfa3823c488905395b7da680e717842db4ad) [#328](https://github.com/wellyshen/react-cool-form/pull/328) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(utils): unset all types of value
- [`a33fd6f`](https://github.com/wellyshen/react-cool-form/commit/a33fd6fc35f37b619fdb9f3f19ec1b4462112d96) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs(readme): update demo gif
* [`0f534a9`](https://github.com/wellyshen/react-cool-form/commit/0f534a90c2069c078e50fa0bac9b9a22e4d021c5) [#327](https://github.com/wellyshen/react-cool-form/pull/327) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(utils): handle `unset` exception
## 0.0.106
### Patch Changes
- [`448f554`](https://github.com/wellyshen/react-cool-form/commit/448f554121214d779a8c99f3fc8e7741cb344769) [#321](https://github.com/wellyshen/react-cool-form/pull/321) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(utils): set array type value correctly
* [`6755695`](https://github.com/wellyshen/react-cool-form/commit/67556955e92a222521014ccc0dd1b90610ad564b) [#322](https://github.com/wellyshen/react-cool-form/pull/322) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(utils): set object type value correctly
- [`414c489`](https://github.com/wellyshen/react-cool-form/commit/414c4897e191f61824370244550604567483cd44) [#319](https://github.com/wellyshen/react-cool-form/pull/319) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(utils): remove `setTrueValues` utility function
## 0.0.105
### Patch Changes
- [`02f25a3`](https://github.com/wellyshen/react-cool-form/commit/02f25a32f4fb1fd1136e52937f803b662ac8ea8a) [#312](https://github.com/wellyshen/react-cool-form/pull/312) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): require value for `setValue` and `setError`
* [`d69188b`](https://github.com/wellyshen/react-cool-form/commit/d69188b3825197ee10bc240e816561e201af85b7) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): remove unnecessary logic
- [`ad7336a`](https://github.com/wellyshen/react-cool-form/commit/ad7336abdc107e22c116873e43a4abe15d6aabca) [#311](https://github.com/wellyshen/react-cool-form/pull/311) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): rename the option of `getState` from `filterUntouchedError` to `errorWithTouched`
## 0.0.104
### Patch Changes
- [`83c2474`](https://github.com/wellyshen/react-cool-form/commit/83c2474a4f3f7781774f8541084eed9953490034) [#303](https://github.com/wellyshen/react-cool-form/pull/303) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): remove `setValues` and `setErrors`
* [`c623681`](https://github.com/wellyshen/react-cool-form/commit/c6236811fe4569f39be18a4c62c8a3860e5952cc) [#306](https://github.com/wellyshen/react-cool-form/pull/306) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): add `setTouched` method
- [`0bec8fd`](https://github.com/wellyshen/react-cool-form/commit/0bec8fd7a097d3d5760053efd8b52273ec5140c7) [#307](https://github.com/wellyshen/react-cool-form/pull/307) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): add `clearErrors` method
* [`817f762`](https://github.com/wellyshen/react-cool-form/commit/817f762aac28d075f4d30e0f34417b7a382c567f) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): rename `setFieldDirty` to `setDirty`
- [`6936727`](https://github.com/wellyshen/react-cool-form/commit/69367272f03d9e347e786079d565f3f7ab3ec126) [#305](https://github.com/wellyshen/react-cool-form/pull/305) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): change `setFieldValue` to `setValue` & change `setFieldError` to `setError`
* [`1c30b23`](https://github.com/wellyshen/react-cool-form/commit/1c30b23bc255d6d5c3cba9186757c8404e136d0f) [#308](https://github.com/wellyshen/react-cool-form/pull/308) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): combine `validateField` and `validateForm` into `runValidation`
## 0.0.103
### Patch Changes
- [`d3c8247`](https://github.com/wellyshen/react-cool-form/commit/d3c824751eae453106ec1f0b0153a03730284744) [#301](https://github.com/wellyshen/react-cool-form/pull/301) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): pass all parameters back to the `onChange` handler of the `controller` API
## 0.0.102
### Patch Changes
- [`e331cde`](https://github.com/wellyshen/react-cool-form/commit/e331cde6b28dc931e7cb72310264cd283687b375) [#299](https://github.com/wellyshen/react-cool-form/pull/299) Thanks [@wellyshen](https://github.com/wellyshen)! - Perf(useState): delete used state when a field is removed
* [`8237117`](https://github.com/wellyshen/react-cool-form/commit/8237117868530731b247c8fd10e1cb66f1fe5f1e) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs(readme): update to-do
## 0.0.101
### Patch Changes
- [`9c1e7ce`](https://github.com/wellyshen/react-cool-form/commit/9c1e7ce72ba99bf7e3dc491034a346c1f35030c1) [#293](https://github.com/wellyshen/react-cool-form/pull/293) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(type): enhance types
* [`569167b`](https://github.com/wellyshen/react-cool-form/commit/569167be2ffe61bacb5bf7c6d872db3b87f3d9f9) [#297](https://github.com/wellyshen/react-cool-form/pull/297) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(utils): `cloneObject` will not handle event object
- [`e75aeb7`](https://github.com/wellyshen/react-cool-form/commit/e75aeb74c2a16b73fcbeb1e3486bf159776f5e5e) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs(readme): update features
* [`4399c18`](https://github.com/wellyshen/react-cool-form/commit/4399c1881f184af36cc163f22c12f014d668525b) [#296](https://github.com/wellyshen/react-cool-form/pull/296) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): rename `dirtyFields` state and option to `dirty`
- [`0901fc3`](https://github.com/wellyshen/react-cool-form/commit/0901fc31482f8197b200c444fac18080946ef447) [#291](https://github.com/wellyshen/react-cool-form/pull/291) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): adjust the `parse` and `onChange` APIs of the `controller` method
* [`5000470`](https://github.com/wellyshen/react-cool-form/commit/5000470f7ff57bf995cd121ee6c2614cb634ba11) [#295](https://github.com/wellyshen/react-cool-form/pull/295) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): rename the option of `setValues` from `touchedFields` to `touched`
- [`e1cd135`](https://github.com/wellyshen/react-cool-form/commit/e1cd135ccc90fba025caf6bb49712c3afe5bc644) [#294](https://github.com/wellyshen/react-cool-form/pull/294) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): rename `removeUnmountedField` to `shouldRemoveField`
## 0.0.100
### Patch Changes
- [`f537695`](https://github.com/wellyshen/react-cool-form/commit/f53769513b8e221a379008d7b2c86f9e441682e8) [#288](https://github.com/wellyshen/react-cool-form/pull/288) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): can not clear field(s) due to the side-effect of caching paths
## 0.0.99
### Patch Changes
- [`ad0fa46`](https://github.com/wellyshen/react-cool-form/commit/ad0fa462f0febe511416dee1f14cc77a3652001f) [#287](https://github.com/wellyshen/react-cool-form/pull/287) Thanks [@wellyshen](https://github.com/wellyshen)! - Perf(utils): cache converted pathes
## 0.0.98
### Patch Changes
- [`abd1f39`](https://github.com/wellyshen/react-cool-form/commit/abd1f3979c8501af2d46bc89acca0402aa6acf35) [#285](https://github.com/wellyshen/react-cool-form/pull/285) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): skip warning for field with `data-rcf-ignore`
* [`baf7fcf`](https://github.com/wellyshen/react-cool-form/commit/baf7fcf7a2ac238673dea27cc0508cfcd598b47d) [#284](https://github.com/wellyshen/react-cool-form/pull/284) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): unset nested array value
- [`6bf0e46`](https://github.com/wellyshen/react-cool-form/commit/6bf0e46a7e19d9858a6ebd2788d40bfae08b88d3) [#283](https://github.com/wellyshen/react-cool-form/pull/283) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): do not count the `valid` key as error when use built-in validation with state mode
## 0.0.97
### Patch Changes
- [`fdd269c`](https://github.com/wellyshen/react-cool-form/commit/fdd269ca3e4caf91aea54cac708d0d8ab6bb8088) [#279](https://github.com/wellyshen/react-cool-form/pull/279) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): correc the type of `setFieldValue`
## 0.0.96
### Patch Changes
- [`b3e2257`](https://github.com/wellyshen/react-cool-form/commit/b3e2257b494d0a626680711fe45ab7e99a1e4eb8) [#278](https://github.com/wellyshen/react-cool-form/pull/278) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(types): change `Errors` to `FormErrors`
* [`cf0dc60`](https://github.com/wellyshen/react-cool-form/commit/cf0dc605645be5755840e4aa268a020b1394ff4a) [#276](https://github.com/wellyshen/react-cool-form/pull/276) Thanks [@wellyshen](https://github.com/wellyshen)! - Perf(useForm): avoid unnecessary re-renders when getting empty state
- [`1600d0a`](https://github.com/wellyshen/react-cool-form/commit/1600d0acbaef9877654dc481022c5bae1bd26448) [#277](https://github.com/wellyshen/react-cool-form/pull/277) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): handle `getState` exception
* [`cf4b645`](https://github.com/wellyshen/react-cool-form/commit/cf4b6451c63ec8dfb8275dec5759701829b8aed2) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(types): re-order types
## 0.0.95
### Patch Changes
- [`3a24549`](https://github.com/wellyshen/react-cool-form/commit/3a245496a5b70c6e1bb77b9081d98aa24b056865) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): fix variable typo
* [`531aa74`](https://github.com/wellyshen/react-cool-form/commit/531aa74d096771b0abb875a066d0bc5ef5394090) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): change milestone to to-do
## 0.0.94
### Patch Changes
- [`e267f75`](https://github.com/wellyshen/react-cool-form/commit/e267f75437001c8959257613e2d0aa3e64cfaff3) [#272](https://github.com/wellyshen/react-cool-form/pull/272) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): change `config` from required to optional
## 0.0.93
### Patch Changes
- [`89a0647`](https://github.com/wellyshen/react-cool-form/commit/89a06477b97c6ac9a66694c88cad0afdb45112a1) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs(readme): update bundle size
* [`a3b7228`](https://github.com/wellyshen/react-cool-form/commit/a3b7228e4693fad0df80b117aa8899850a959bc2) [#271](https://github.com/wellyshen/react-cool-form/pull/271) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(types): adjust .d.ts
## 0.0.92
### Patch Changes
- [`cf8d06e`](https://github.com/wellyshen/react-cool-form/commit/cf8d06e4e10002fa75af15e2ec2bc406c3d128ad) [#269](https://github.com/wellyshen/react-cool-form/pull/269) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): default value attribute not working when reset form
* [`46bad87`](https://github.com/wellyshen/react-cool-form/commit/46bad87c459c1fdbf86c31e19c556bc3e76a39fe) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): narrow down warning link URL
- [`f6a8ed5`](https://github.com/wellyshen/react-cool-form/commit/f6a8ed5a14e36c761bc7afd662b256bb987eb483) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs: update links
## 0.0.91
### Patch Changes
- [`028b95e`](https://github.com/wellyshen/react-cool-form/commit/028b95e77ff7d683c98a74423ae05efe0409265d) [#265](https://github.com/wellyshen/react-cool-form/pull/265) Thanks [@wellyshen](https://github.com/wellyshen)! - Perf(useForm): do not trigger re-rendering when imperatively setting the same values
* [`f6b97a2`](https://github.com/wellyshen/react-cool-form/commit/f6b97a28f91946900fb2c8c0139367c48ef47d4d) [#266](https://github.com/wellyshen/react-cool-form/pull/266) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): update `defaultValues` by `reset(nextValues)`
- [`2d25b4a`](https://github.com/wellyshen/react-cool-form/commit/2d25b4a4e0f27a5db2890b75c605aff883bc924f) [#267](https://github.com/wellyshen/react-cool-form/pull/267) Thanks [@wellyshen](https://github.com/wellyshen)! - Perf(useForm): do not trigger `isValidating` when running field-level validation
## 0.0.90
### Patch Changes
- [`6c73fb0`](https://github.com/wellyshen/react-cool-form/commit/6c73fb046077120726ea84fb5743f6e96fa71e53) [#262](https://github.com/wellyshen/react-cool-form/pull/262) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): field updating laggy due to conditional fields
* [`f8fe312`](https://github.com/wellyshen/react-cool-form/commit/f8fe31269b7846464f00475da938a3b809f2ce39) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): remove badge
## 0.0.89
### Patch Changes
- [`74c6bd5`](https://github.com/wellyshen/react-cool-form/commit/74c6bd55a6fa80af24721d1d007cfe78181c7509) [#260](https://github.com/wellyshen/react-cool-form/pull/260) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): add `builtInValidationMode` option
* [`42e3844`](https://github.com/wellyshen/react-cool-form/commit/42e384444732296194d9e165231976d06f835d72) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): remove warning
## 0.0.88
### Patch Changes
- [`aa86eee`](https://github.com/wellyshen/react-cool-form/commit/aa86eee774325ed128828703dcb8d1ddc65dc36a) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): fix broken links
## 0.0.87
### Patch Changes
- [`8af3145`](https://github.com/wellyshen/react-cool-form/commit/8af3145816707306ea2ec55a4ee0832b7e4a0693) [#255](https://github.com/wellyshen/react-cool-form/pull/255) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(types): export more types
* [`c487230`](https://github.com/wellyshen/react-cool-form/commit/c48723020fa795b158e368be16dbd81f747fa822) [#253](https://github.com/wellyshen/react-cool-form/pull/253) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): add field-names callback for the option of `setValues`
- [`8cde001`](https://github.com/wellyshen/react-cool-form/commit/8cde0013b486f8c9d10fd57da9c52b6a92b05934) [#256](https://github.com/wellyshen/react-cool-form/pull/256) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(types): enhance the readability of type
## 0.0.86
### Patch Changes
- [`8588512`](https://github.com/wellyshen/react-cool-form/commit/8588512713ff7e3bbfc026f55aa07ebb6ae65f9a) [#250](https://github.com/wellyshen/react-cool-form/pull/250) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): use `formState` instead of the `getState` method for event handlers
* [`c09d541`](https://github.com/wellyshen/react-cool-form/commit/c09d541f3caf6517d557f4f817c832b458d43ef8) [#252](https://github.com/wellyshen/react-cool-form/pull/252) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): consist event's options
## 0.0.85
### Patch Changes
- [`8da0654`](https://github.com/wellyshen/react-cool-form/commit/8da065490fdd845646c6b4823e17f7fb07ab44d6) [#248](https://github.com/wellyshen/react-cool-form/pull/248) Thanks [@wellyshen](https://github.com/wellyshen)! - perf(useForm): performance optimizing
## 0.0.84
### Patch Changes
- [`d87a6bf`](https://github.com/wellyshen/react-cool-form/commit/d87a6bf8d8265bb6b65a6eb4f5539a1cfb8f7930) [#247](https://github.com/wellyshen/react-cool-form/pull/247) Thanks [@wellyshen](https://github.com/wellyshen)! - perf(useForm): minimize the re-renders of `setValues`
* [`099ac5c`](https://github.com/wellyshen/react-cool-form/commit/099ac5cea87d4946278163dbcd97d3670e4871b7) [#245](https://github.com/wellyshen/react-cool-form/pull/245) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): include non form input elements into the set all touched of `submit`
## 0.0.82
### Patch Changes
- [`476890f`](https://github.com/wellyshen/react-cool-form/commit/476890f9e361a1ea165ee047df94bb1d48b27045) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(type): correct the type of `validateField`
* [`8398e39`](https://github.com/wellyshen/react-cool-form/commit/8398e396c3b834f340bda706d746c7509759b5f1) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update example
## 0.0.81
### Patch Changes
- [`5e02e6e`](https://github.com/wellyshen/react-cool-form/commit/5e02e6e4791c6577d0a2af03cda74828ee768b79) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update warning
## 0.0.80
### Patch Changes
- [`649d336`](https://github.com/wellyshen/react-cool-form/commit/649d336b54ac7b00375aa6cbe024da53cea002c9) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): correct grammer
## 0.0.79
### Patch Changes
- [`0125f87`](https://github.com/wellyshen/react-cool-form/commit/0125f87fd5187c67d066ebf6ca6f2f89b07eafd6) [#237](https://github.com/wellyshen/react-cool-form/pull/237) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): add `removeUnmountedField` config
* [`02a759e`](https://github.com/wellyshen/react-cool-form/commit/02a759e8e785373ec45f27f10d62db7722d7859f) [#236](https://github.com/wellyshen/react-cool-form/pull/236) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): crash due to undefined field parsers
- [`43bc612`](https://github.com/wellyshen/react-cool-form/commit/43bc6127bbdcc71fed1616c042eeddf50d2a1ddd) [#234](https://github.com/wellyshen/react-cool-form/pull/234) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): dynamic fields not working
## 0.0.78
### Patch Changes
- [`167fcb6`](https://github.com/wellyshen/react-cool-form/commit/167fcb652bf6c2ee12fe140c2b3ea8cf548aebc8) [#232](https://github.com/wellyshen/react-cool-form/pull/232) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): change `getState`'s option name from `filterUntouchedErrors` to `filterUntouchedError`
## 0.0.77
### Patch Changes
- [`9f40af2`](https://github.com/wellyshen/react-cool-form/commit/9f40af21806db37f1f4f6254459cb38f92e145ab) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update features and example
* [`155a140`](https://github.com/wellyshen/react-cool-form/commit/155a14079079ad16ab5228fc606c9cac4764512e) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): add more information link for `getState`
- [`d23eef5`](https://github.com/wellyshen/react-cool-form/commit/d23eef5550868e9cb580b6a0e2c0ea9355444bdf) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update the demo link of example
## 0.0.76
### Patch Changes
- [`cedfe8a`](https://github.com/wellyshen/react-cool-form/commit/cedfe8a45dca7e426524f85d899ea4bfeefb6791) Thanks [@wellyshen](https://github.com/wellyshen)! - docs: update readme and document site
## 0.0.75
### Patch Changes
- [`acc5b4e`](https://github.com/wellyshen/react-cool-form/commit/acc5b4e185bee53055292fbf22fb5deeb5b1081b) Thanks [@wellyshen](https://github.com/wellyshen)! - docs: add form-level validation
## 0.0.74
### Patch Changes
- [`a2ccfd0`](https://github.com/wellyshen/react-cool-form/commit/a2ccfd07c9111c9764175b1a904763004f5bb007) Thanks [@wellyshen](https://github.com/wellyshen)! - docs: sync examples with demo apps
## 0.0.72
### Patch Changes
- [`11a779e`](https://github.com/wellyshen/react-cool-form/commit/11a779e270c07a8e6eb19e76081d6d389f82d201) [#222](https://github.com/wellyshen/react-cool-form/pull/222) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): reduce unnecessary renders for `getState`
## 0.0.71
### Patch Changes
- [`f702cc8`](https://github.com/wellyshen/react-cool-form/commit/f702cc8c25d0aa0c1dc7ac731add2fe80fe3e741) Thanks [@wellyshen](https://github.com/wellyshen)! - chore(package): change homepage URL
## 0.0.70
### Patch Changes
- [`6dca6ab`](https://github.com/wellyshen/react-cool-form/commit/6dca6ab47b62533d097463c25a818102a4be7623) Thanks [@wellyshen](https://github.com/wellyshen)! - docs: update getting-started & the API url of README.md & add "API Reference" page
## 0.0.69
### Patch Changes
- [`5b2347c`](https://github.com/wellyshen/react-cool-form/commit/5b2347c47d557252168dae54519c8f495b1b09cd) Thanks [@wellyshen](https://github.com/wellyshen)! - docs: update readme
## 0.0.68
### Patch Changes
- [`0c6f761`](https://github.com/wellyshen/react-cool-form/commit/0c6f7618fdfd7e3d813faafb929e198b69e78349) Thanks [@wellyshen](https://github.com/wellyshen)! - docs: update example
## 0.0.67
### Patch Changes
- [`d887fb9`](https://github.com/wellyshen/react-cool-form/commit/d887fb946177899b3a4bde1dc031eed570df53c0) [#210](https://github.com/wellyshen/react-cool-form/pull/210) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): add warning for getting `values` state alone
## 0.0.66
### Patch Changes
- [`8487733`](https://github.com/wellyshen/react-cool-form/commit/84877333542a20e96763e7dec420b84a9ca8541d) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update codesandbox link
## 0.0.65
### Patch Changes
- [`0649089`](https://github.com/wellyshen/react-cool-form/commit/064908920ada6ad411095a2af95844e47b6a4888) [#207](https://github.com/wellyshen/react-cool-form/pull/207) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): correct the `onChange` type of `controller`
## 0.0.64
### Patch Changes
- [`b30e638`](https://github.com/wellyshen/react-cool-form/commit/b30e6381f210705573e95c02d8574352e342deda) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): correct grammar
## 0.0.63
### Patch Changes
- [`bcc1e9b`](https://github.com/wellyshen/react-cool-form/commit/bcc1e9b75a9fe17e47bdf372b96894a6323efe34) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update features section
## 0.0.62
### Patch Changes
- [`edcf47d`](https://github.com/wellyshen/react-cool-form/commit/edcf47d80bcb3c779cd2bd9f65f434553afd6724) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update example
* [`d1199b6`](https://github.com/wellyshen/react-cool-form/commit/d1199b6b68d114655805eab94336ade91384c20a) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): add features section
- [`e7b29d9`](https://github.com/wellyshen/react-cool-form/commit/e7b29d9c2aa7d0e9ecdba038ce5fea223e98e5f2) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update demo link
## 0.0.61
### Patch Changes
- [`3caa0d1`](https://github.com/wellyshen/react-cool-form/commit/3caa0d1c92f481b1f3aa54b16a8e1245f64969a0) [#201](https://github.com/wellyshen/react-cool-form/pull/201) Thanks [@wellyshen](https://github.com/wellyshen)! - perf: use `dequal` instead of `fast-deep-equal`
## 0.0.60
### Patch Changes
- [`577de2a`](https://github.com/wellyshen/react-cool-form/commit/577de2a3ff3726bbfd497f810b734f3be7b0c8fd) [#200](https://github.com/wellyshen/react-cool-form/pull/200) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): shorten code
* [`b09a2c0`](https://github.com/wellyshen/react-cool-form/commit/b09a2c0b7e22bb21e49cb94c60e6819aed2b2156) [#199](https://github.com/wellyshen/react-cool-form/pull/199) Thanks [@wellyshen](https://github.com/wellyshen)! - add `parse` option for field ref & correct the behavior of `controller`
- [`a089883`](https://github.com/wellyshen/react-cool-form/commit/a0898831fda1858ee44841518fbc1b96aa8d972f) [#197](https://github.com/wellyshen/react-cool-form/pull/197) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): support `valueAsNumber` and `valueAsDate` for field ref
## 0.0.59
### Patch Changes
- [`e50b2ff`](https://github.com/wellyshen/react-cool-form/commit/e50b2ff3efa4b1051a79de1a2bc7374442374e22) [#195](https://github.com/wellyshen/react-cool-form/pull/195) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): change `formRef` to `form`
* [`a0c41f8`](https://github.com/wellyshen/react-cool-form/commit/a0c41f833929c67b571513a4783e6b566097c8c3) [#195](https://github.com/wellyshen/react-cool-form/pull/195) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): change `validate` to `field`
- [`b769633`](https://github.com/wellyshen/react-cool-form/commit/b76963398517ff5c98ebadfca12a0dad4e6093a8) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): remove form ref warning
## 0.0.58
### Patch Changes
- [`df94182`](https://github.com/wellyshen/react-cool-form/commit/df94182b0c327053535fb7c69b99b8dd518e0173) [#189](https://github.com/wellyshen/react-cool-form/pull/189) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): use `valueAsNumber` instead `parseFloat()` for converting data
* [`4eae04c`](https://github.com/wellyshen/react-cool-form/commit/4eae04c9feb6dde4d07b0c83633ce95792c96ea2) [#193](https://github.com/wellyshen/react-cool-form/pull/193) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): correct the logic of `controller` method
- [`26936f5`](https://github.com/wellyshen/react-cool-form/commit/26936f5b8f8f49f39c115d5acb913a94fd0fdb50) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): rename `handleFieldChange` to `handleChangeEvent`
## 0.0.57
### Patch Changes
- [`ae3447c`](https://github.com/wellyshen/react-cool-form/commit/ae3447cbefdcc025e9ca7f10858003d088db38f4) Thanks [@wellyshen](https://github.com/wellyshen)! - chore: update slogan
## 0.0.56
### Patch Changes
- [`120bea9`](https://github.com/wellyshen/react-cool-form/commit/120bea976f9692c022d3c77abdd7201307ebc453) Thanks [@wellyshen](https://github.com/wellyshen)! - docs: update readme
## 0.0.55
### Patch Changes
- [`e60deba`](https://github.com/wellyshen/react-cool-form/commit/e60deba4f44e273ff3225bb24579a27dd5f25237) [#181](https://github.com/wellyshen/react-cool-form/pull/181) Thanks [@wellyshen](https://github.com/wellyshen)! - feat: expose the `unset` utility function
## 0.0.54
### Patch Changes
- [`53fd53c`](https://github.com/wellyshen/react-cool-form/commit/53fd53c489f58f70eac35d05d103c267edc30b69) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(utils): filter the `undefined` property only for `filterError`
## 0.0.53
### Patch Changes
- [`573c7f7`](https://github.com/wellyshen/react-cool-form/commit/573c7f79c3c2e70d429e8759724b317aa5c28bd3) [#178](https://github.com/wellyshen/react-cool-form/pull/178) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useState): remove `setDefaultValuesRef` method
## 0.0.52
### Patch Changes
- [`fa7ebf6`](https://github.com/wellyshen/react-cool-form/commit/fa7ebf6d56f145a82cb30f1e981fc6b3b00f9df6) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(utils): delete the filtered property for `filterError()`
* [`68d232d`](https://github.com/wellyshen/react-cool-form/commit/68d232d66844389a7416700cfd8d485bf855a92e) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): refine the type of `controller`
## 0.0.51
### Patch Changes
- [`a9bc203`](https://github.com/wellyshen/react-cool-form/commit/a9bc203a74919e3693ecc8dbd0d5e125c22bde9a) Thanks [@wellyshen](https://github.com/wellyshen)! - perf(utils): improve the performance of `getIsDirty()`
* [`7e296d0`](https://github.com/wellyshen/react-cool-form/commit/7e296d02a248d636aa6718d7f79d42d3ad20bfa7) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update example
- [`c4acafc`](https://github.com/wellyshen/react-cool-form/commit/c4acafcb96378b369321236eb767bd93ec25686b) Thanks [@wellyshen](https://github.com/wellyshen)! - chore: refine project structure
* [`7eb1693`](https://github.com/wellyshen/react-cool-form/commit/7eb1693af7995207550da212435e4272ec15ff39) [#175](https://github.com/wellyshen/react-cool-form/pull/175) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): correct the behavior of built-in validation
- [`57278de`](https://github.com/wellyshen/react-cool-form/commit/57278de50edbf5959f51472969b659c3743022e8) [#174](https://github.com/wellyshen/react-cool-form/pull/174) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): adjust the API of `getState()`
* [`9af09b2`](https://github.com/wellyshen/react-cool-form/commit/9af09b2b01552414897b041deb6e1c64ca21ca9f) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update example
- [`daac107`](https://github.com/wellyshen/react-cool-form/commit/daac107aafc61ccc761ad79f47fa9a4a441896aa) [#173](https://github.com/wellyshen/react-cool-form/pull/173) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): re-use methods
## 0.0.50
### Patch Changes
- [`af56a0b`](https://github.com/wellyshen/react-cool-form/commit/af56a0b818f61fe971417fe7daf917d31d166f00) [#171](https://github.com/wellyshen/react-cool-form/pull/171) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): auto delete undefined value for `setFieldValue()`
* [`f1e05d1`](https://github.com/wellyshen/react-cool-form/commit/f1e05d1ba9a1f142c2a1fddef7a80bca69ba05fb) [#169](https://github.com/wellyshen/react-cool-form/pull/169) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): correct the logic of `dirtyFields` and `isDirty`
- [`e7adb99`](https://github.com/wellyshen/react-cool-form/commit/e7adb99ec60171bebdbbd2d648f7027e2209a459) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): prevent un-necessary default values checking
## 0.0.49
### Patch Changes
- [`aef2df3`](https://github.com/wellyshen/react-cool-form/commit/aef2df3c714faa692d4d42eb91a5f6eac44fdf52) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): crash due to filer untouched errors
## 0.0.48
### Patch Changes
- [`80879a3`](https://github.com/wellyshen/react-cool-form/commit/80879a3889d9a25a46f37e0f604408c71d6fcbf4) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update example
## 0.0.47
### Patch Changes
- [`75f42bc`](https://github.com/wellyshen/react-cool-form/commit/75f42bcd15e512250b006a4058a28da7f0c17d78) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update the type definition section
## 0.0.46
### Patch Changes
- [`988f9a8`](https://github.com/wellyshen/react-cool-form/commit/988f9a8df656e47921b763e01d122706e13d2a2a) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): add type definition
* [`35f9872`](https://github.com/wellyshen/react-cool-form/commit/35f9872d1db152f045cdee6434b7de1a26a996be) [#164](https://github.com/wellyshen/react-cool-form/pull/164) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): adjust the `watch` arg of `getState()`
## 0.0.45
### Patch Changes
- [`56345dc`](https://github.com/wellyshen/react-cool-form/commit/56345dcf46776b590b95833f9c11e6a36d6920ba) [#161](https://github.com/wellyshen/react-cool-form/pull/161) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(type): enhance the type of `controller`
* [`996eb40`](https://github.com/wellyshen/react-cool-form/commit/996eb40d118c8febd0e75f36e34f3cb56ef7a19e) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor: move utility functions from useForm to utils
- [`e69ea75`](https://github.com/wellyshen/react-cool-form/commit/e69ea75fabff4a9d32f31f14bce72398f29ab917) [#163](https://github.com/wellyshen/react-cool-form/pull/163) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): get touched error only
## 0.0.44
### Patch Changes
- [`afab297`](https://github.com/wellyshen/react-cool-form/commit/afab2978d4344dc332635b1926c250b21ecaf5e4) [#159](https://github.com/wellyshen/react-cool-form/pull/159) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): add `format` option for `controller`
* [`5c79904`](https://github.com/wellyshen/react-cool-form/commit/5c7990433e9df4a7972f882e5566ed17625f25a7) [#157](https://github.com/wellyshen/react-cool-form/pull/157) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): change the `parser` option of controller to `parse`
## 0.0.43
### Patch Changes
- [`6a2939d`](https://github.com/wellyshen/react-cool-form/commit/6a2939deb842977eabd0495013c70f726bc6adb1) [#155](https://github.com/wellyshen/react-cool-form/pull/155) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): remove `iControlFields` and `excludeFields` configs use `ignoreFields` instead
## 0.0.42
### Patch Changes
- [`0df48ee`](https://github.com/wellyshen/react-cool-form/commit/0df48ee12ac086a33e5b217034b07628a21b2f21) [#149](https://github.com/wellyshen/react-cool-form/pull/149) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): built-in errors not be cleaned
## 0.0.41
### Patch Changes
- [`57f5fc9`](https://github.com/wellyshen/react-cool-form/commit/57f5fc904aa016a1c7d1c2a7157a7226ea163f62) [#148](https://github.com/wellyshen/react-cool-form/pull/148) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): avoid duplicated set field touched for controller
* [`9a060e0`](https://github.com/wellyshen/react-cool-form/commit/9a060e0faff59c320c147c6bf396c6c51176f045) [#146](https://github.com/wellyshen/react-cool-form/pull/146) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): consist options name of the `setFieldValue` method
## 0.0.40
### Patch Changes
- [`701b8f9`](https://github.com/wellyshen/react-cool-form/commit/701b8f95a2719dc07f59351a1ab4a042c2527708) [#144](https://github.com/wellyshen/react-cool-form/pull/144) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): turn isSubmitted to `true` once submit is successful
## 0.0.39
### Patch Changes
- [`cf06541`](https://github.com/wellyshen/react-cool-form/commit/cf06541eb192f6bb66d0b9b4989f90406f219ce3) [#142](https://github.com/wellyshen/react-cool-form/pull/142) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): correct the logic between controlled and un-controlled fields
* [`3e3ef26`](https://github.com/wellyshen/react-cool-form/commit/3e3ef26624289b8065ca59bb33b3cdf255f8f652) [#143](https://github.com/wellyshen/react-cool-form/pull/143) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): get the deep intial value as the default value of field
- [`7399a99`](https://github.com/wellyshen/react-cool-form/commit/7399a9920eaf3938a513ba67f4978d97b47c4f87) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor: use default value for events
* [`8c8209d`](https://github.com/wellyshen/react-cool-form/commit/8c8209de9abd1234bca8458d655ad537232ba30f) [#141](https://github.com/wellyshen/react-cool-form/pull/141) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): use validate field instead of validate form for single updated field
- [`401f7ec`](https://github.com/wellyshen/react-cool-form/commit/401f7ec539527d7a28c63ada663b9dba28ca7658) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): remove the logic of checking exist errors on submit
* [`1d3c5e8`](https://github.com/wellyshen/react-cool-form/commit/1d3c5e8618f5f5eb72c95c1e99838fff33d0893d) [#139](https://github.com/wellyshen/react-cool-form/pull/139) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useState): debug event not be sent correctly
## 0.0.38
### Patch Changes
- [`d6d254e`](https://github.com/wellyshen/react-cool-form/commit/d6d254e17d22ef56e5392a840b20eda4e221e624) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update example
## 0.0.37
### Patch Changes
- [`ccb2ef9`](https://github.com/wellyshen/react-cool-form/commit/ccb2ef96f94e99e44c19bc9c95af266443ffa4c5) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): refine submit()
* [`0ed35f0`](https://github.com/wellyshen/react-cool-form/commit/0ed35f0f770ce2eff703e392b3049268a4b8b581) [#137](https://github.com/wellyshen/react-cool-form/pull/137) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): add excludeFields config
- [`6f034af`](https://github.com/wellyshen/react-cool-form/commit/6f034afd65fcd561ba9e1dbe59c60b7c8e4133df) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(package.json): update example
* [`130e476`](https://github.com/wellyshen/react-cool-form/commit/130e4769a1a8dd4e4dee4d075801fbf0e02dfb2b) [#136](https://github.com/wellyshen/react-cool-form/pull/136) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): change iControlledFields config to iControlFields
## 0.0.36
### Patch Changes
- [`a5ee7d9`](https://github.com/wellyshen/react-cool-form/commit/a5ee7d9784038f200f4065ead3728cfdc09f0689) [#132](https://github.com/wellyshen/react-cool-form/pull/132) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): change the ignoreFields to iControlledFields
* [`957de35`](https://github.com/wellyshen/react-cool-form/commit/957de35fa996357d90ac0c017a4e09316a1f8dca) [#134](https://github.com/wellyshen/react-cool-form/pull/134) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): set all fields to touched when submitting
## 0.0.35
### Patch Changes
- [`9134efa`](https://github.com/wellyshen/react-cool-form/commit/9134efa42c2444874f1e24f2efc80e38906fb76f) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update the example section
* [`704e67c`](https://github.com/wellyshen/react-cool-form/commit/704e67cb22c70081e4b47a7ccacd2d80a8689b10) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update example
- [`72c3aaa`](https://github.com/wellyshen/react-cool-form/commit/72c3aaa08cba5fb130f56dccdd72c6f55491f051) [#129](https://github.com/wellyshen/react-cool-form/pull/129) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): remove setFieldTouchedMaybeValidate()
* [`428c80b`](https://github.com/wellyshen/react-cool-form/commit/428c80baa3b917c4bdf8b12d30e9892c56cbd169) [#131](https://github.com/wellyshen/react-cool-form/pull/131) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): cache previous built-in errors for better DX
## 0.0.34
### Patch Changes
- [`40c5e05`](https://github.com/wellyshen/react-cool-form/commit/40c5e057ebde404a00794b36045f7cc823413972) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): enhance the readability of setFieldTouchedMaybeValidate()
* [`9b451a4`](https://github.com/wellyshen/react-cool-form/commit/9b451a49e1cb913135818b749c88440441fd4990) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): update example
## 0.0.33
### Patch Changes
- [`e916e57`](https://github.com/wellyshen/react-cool-form/commit/e916e573177c9c9e554d48411ad7ed531619448c) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): correct example
## 0.0.32
### Patch Changes
- [`732b593`](https://github.com/wellyshen/react-cool-form/commit/732b593ad77175e4e866cf6439abc0772b1c118c) Thanks [@wellyshen](https://github.com/wellyshen)! - chore: add more github templates
* [`c8c715d`](https://github.com/wellyshen/react-cool-form/commit/c8c715de6779da10b1563baaa2fbccea69a57f03) [#124](https://github.com/wellyshen/react-cool-form/pull/124) Thanks [@wellyshen](https://github.com/wellyshen)! - chore: use bundlesize
- [`495f275`](https://github.com/wellyshen/react-cool-form/commit/495f275851858aafd0429e5222aa4d0b52502088) Thanks [@wellyshen](https://github.com/wellyshen)! - docs: update readme
* [`908f7fe`](https://github.com/wellyshen/react-cool-form/commit/908f7fe0500c7ccfdb767737d35fbcc9bdcf5fb4) Thanks [@wellyshen](https://github.com/wellyshen)! - chore: adjust package commands and rollup config
- [`e3e0e73`](https://github.com/wellyshen/react-cool-form/commit/e3e0e73a568456228b28a489d133074b74954593) [#126](https://github.com/wellyshen/react-cool-form/pull/126) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): correct the logic of avoid double validating of setFieldTouched()
## 0.0.31
### Patch Changes
- [`abc5239`](https://github.com/wellyshen/react-cool-form/commit/abc52396e0036db192f12b0e89c1e56320de1d1f) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): change runWithLowPrioirty() to requestIdleCallback()
## 0.0.30
### Patch Changes
- [`1621ce1`](https://github.com/wellyshen/react-cool-form/commit/1621ce1b88c5027b1feef37e87dbe7a06fb44060) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): move runWithLowPrioirty into useForm
## 0.0.29
### Patch Changes
- [`948807c`](https://github.com/wellyshen/react-cool-form/commit/948807c6f045948f1fb033052d8984364580f0bb) [#120](https://github.com/wellyshen/react-cool-form/pull/120) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): use requestIdleCallback instead of scheduler
## 0.0.28
### Patch Changes
- [`d935f68`](https://github.com/wellyshen/react-cool-form/commit/d935f68da3e734aaec792493c1418784e32c9a77) [#111](https://github.com/wellyshen/react-cool-form/pull/111) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): correct dynamic fields behavior
## 0.0.27
### Patch Changes
- [`0ceb94a`](https://github.com/wellyshen/react-cool-form/commit/0ceb94a72259492d802f23e0bd288085c86df7a2) [#108](https://github.com/wellyshen/react-cool-form/pull/108) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): auto add/remove fields
## 0.0.26
### Patch Changes
- [`6821f0d`](https://github.com/wellyshen/react-cool-form/commit/6821f0de12a40a607139c8f4b6c74dd366d6c3d0) [#106](https://github.com/wellyshen/react-cool-form/pull/106) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): correct number data type
## 0.0.24
### Patch Changes
- [`8037f98`](https://github.com/wellyshen/react-cool-form/commit/8037f9869a52ccc08742064cf7c0f63819da4e83) [#103](https://github.com/wellyshen/react-cool-form/pull/103) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): adjust the UX of defaultValues, reset(), and setValues()
* [`0890b1c`](https://github.com/wellyshen/react-cool-form/commit/0890b1cff52841df1827a9a62c7ab646af2556cf) [#105](https://github.com/wellyshen/react-cool-form/pull/105) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): move ignoreFieldsRef to getFields()
## 0.0.23
### Patch Changes
- [`3d308f2`](https://github.com/wellyshen/react-cool-form/commit/3d308f2fc92470004820ee629a8756f50ce2be82) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): use the default value of checkbox as the value of checkbox-group
* [`7a0d9cb`](https://github.com/wellyshen/react-cool-form/commit/7a0d9cb2aa07b91bccaef4cda71adfcc9cef4708) [#101](https://github.com/wellyshen/react-cool-form/pull/101) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): enable React defaultValue
- [`d203e07`](https://github.com/wellyshen/react-cool-form/commit/d203e07babf1c5ded1e152e85ccd30b3c68f4c3f) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): use empty object as the fallback of initialValues
* [`f213a2d`](https://github.com/wellyshen/react-cool-form/commit/f213a2d524faced26b693a2bdf6e3d2f9a6a7b5c) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor: remove is-key logic
## 0.0.22
### Patch Changes
- [`af29dfd`](https://github.com/wellyshen/react-cool-form/commit/af29dfd485d6450a2d7613d7cf1e09f433fb08e2) [#99](https://github.com/wellyshen/react-cool-form/pull/99) Thanks [@wellyshen](https://github.com/wellyshen)! - avoid un-necessary re-render & strip hidden input from element checking
* [`4f08865`](https://github.com/wellyshen/react-cool-form/commit/4f088655f9593ed011393e092d73982711dd89ec) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): re-parse fields when both add and remove nodes
- [`19e5584`](https://github.com/wellyshen/react-cool-form/commit/19e55844491388b4b8ff6e454e2345d4a3b58484) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): unset dirtyField if not dirty
## 0.0.21
### Patch Changes
- [`c9ca4b9`](https://github.com/wellyshen/react-cool-form/commit/c9ca4b9135e6bc2208e0e79fe459e896376df719) [#96](https://github.com/wellyshen/react-cool-form/pull/96) Thanks [@wellyshen](https://github.com/wellyshen)! - feat: expose `get()` and `set()` utility functions
## 0.0.20
### Patch Changes
- [`27a6c50`](https://github.com/wellyshen/react-cool-form/commit/27a6c50920fee1089cea1e913b32688b523b50f0) [#93](https://github.com/wellyshen/react-cool-form/pull/93) Thanks [@wellyshen](https://github.com/wellyshen)! - feat: use unset for clear error
## 0.0.19
### Patch Changes
- [`a77b052`](https://github.com/wellyshen/react-cool-form/commit/a77b052f250eff3e80cea75918ab20529dbf4346) [#91](https://github.com/wellyshen/react-cool-form/pull/91) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor: use reset() instead of resetStateRef()
## 0.0.18
### Patch Changes
- [`7ec087a`](https://github.com/wellyshen/react-cool-form/commit/7ec087a08ab2b3e1e4c41eb2389aeafcad8019c2) [#89](https://github.com/wellyshen/react-cool-form/pull/89) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): remove un-necessary for loop from Mutation Observer
## 0.0.17
### Patch Changes
- [`2a40058`](https://github.com/wellyshen/react-cool-form/commit/2a4005814a1a2e4a9ddd82e7ae366e8896ed1fab) [#87](https://github.com/wellyshen/react-cool-form/pull/87) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): built-in handle-submit and handle-reset for you :)
* [`ab72fdb`](https://github.com/wellyshen/react-cool-form/commit/ab72fdb9a89d3c67a78d6e427cb022859c95170f) [#86](https://github.com/wellyshen/react-cool-form/pull/86) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): support built-in validation
- [`e620376`](https://github.com/wellyshen/react-cool-form/commit/e620376bb4d178575f2647223491412eb8353006) Thanks [@wellyshen](https://github.com/wellyshen)! - chore: move configs out of package.json
## 0.0.16
### Patch Changes
- [`f8c31f1`](https://github.com/wellyshen/react-cool-form/commit/f8c31f1f535d4cbe76414518242ab3b8963283bc) [#84](https://github.com/wellyshen/react-cool-form/pull/84) Thanks [@wellyshen](https://github.com/wellyshen)! - perf(useForm): remove setFieldTouchedIfNeeded() to reduce bundle size
* [`3a39bf1`](https://github.com/wellyshen/react-cool-form/commit/3a39bf1a3004ddf363307f511af3d5a4356a8d40) [#83](https://github.com/wellyshen/react-cool-form/pull/83) Thanks [@wellyshen](https://github.com/wellyshen)! - perf(useForm): reduce bundle size by simplying code
## 0.0.15
### Patch Changes
- [`cd173f5`](https://github.com/wellyshen/react-cool-form/commit/cd173f54442321563605db7f2d64c670a7c95b44) [#80](https://github.com/wellyshen/react-cool-form/pull/80) Thanks [@wellyshen](https://github.com/wellyshen)! - upgrade: react v16 to v17
* [`b54bd81`](https://github.com/wellyshen/react-cool-form/commit/b54bd814bc72b2eaf45e14ef8120f574dd71d975) [#81](https://github.com/wellyshen/react-cool-form/pull/81) Thanks [@wellyshen](https://github.com/wellyshen)! - ci: adjust the check-and-test action
## 0.0.14
### Patch Changes
- [`d23d838`](https://github.com/wellyshen/react-cool-form/commit/d23d838f7520c28a93ef7f0922e187fadfa8e5eb) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor: change `getFromState()` to `getState()`
## 0.0.13
### Patch Changes
- [`087f8a4`](https://github.com/wellyshen/react-cool-form/commit/087f8a4b3ae53df325fbc2afe9ce752cc8762301) [#76](https://github.com/wellyshen/react-cool-form/pull/76) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor: adjust file structure
* [`d456e8e`](https://github.com/wellyshen/react-cool-form/commit/d456e8e4dd49c1f03da73c220368d24a68f369e8) [#74](https://github.com/wellyshen/react-cool-form/pull/74) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): add ignoreFields config
## 0.0.12
### Patch Changes
- [`9bc2680`](https://github.com/wellyshen/react-cool-form/commit/9bc2680139f543c2cf8ecbdcf78e88696137f09d) [#72](https://github.com/wellyshen/react-cool-form/pull/72) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): adjust export format
## 0.0.11
### Patch Changes
- [`ccbbe64`](https://github.com/wellyshen/react-cool-form/commit/ccbbe641dd4fc0975d9597cee394a3c4d797510c) [#70](https://github.com/wellyshen/react-cool-form/pull/70) Thanks [@wellyshen](https://github.com/wellyshen)! - fix: correct UMD format
## 0.0.10
### Patch Changes
- [`34bb0c1`](https://github.com/wellyshen/react-cool-form/commit/34bb0c18c29c2e5c5d4378c7560d369f27381832) [#68](https://github.com/wellyshen/react-cool-form/pull/68) Thanks [@wellyshen](https://github.com/wellyshen)! - feat: support UMD format
## 0.0.9
### Patch Changes
- [`0aefe6a`](https://github.com/wellyshen/react-cool-form/commit/0aefe6a3d2fe9e8dd326e360a18c88c003447823) [#67](https://github.com/wellyshen/react-cool-form/pull/67) Thanks [@wellyshen](https://github.com/wellyshen)! - feat(useForm): accept function as the values argv of the reset method
* [`8a8f978`](https://github.com/wellyshen/react-cool-form/commit/8a8f9782abf18e8d97fa804bd45825cb560eeb9b) [#65](https://github.com/wellyshen/react-cool-form/pull/65) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor(useForm): disabled the watch mode of getFormState() for event & remove un-necessary variable
## 0.0.8
### Patch Changes
- [`1815a89`](https://github.com/wellyshen/react-cool-form/commit/1815a89be457826aa55ec37e08123b0a237e60e3) [#62](https://github.com/wellyshen/react-cool-form/pull/62) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): add milestone section
* [`d40937d`](https://github.com/wellyshen/react-cool-form/commit/d40937d12b706c642776d0468d398f409b3bf313) [#63](https://github.com/wellyshen/react-cool-form/pull/63) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): elimiate useLayoutEffect warning in SSR
## 0.0.7
### Patch Changes
- [`598f2f7`](https://github.com/wellyshen/react-cool-form/commit/598f2f721a418cbda96df3931e3cfcc8caeaa5f6) [#60](https://github.com/wellyshen/react-cool-form/pull/60) Thanks [@wellyshen](https://github.com/wellyshen)! - fix(useForm): correct the value of dynamic fields
## 0.0.6
### Patch Changes
- [`6ff974e`](https://github.com/wellyshen/react-cool-form/commit/6ff974ee206aa498ccf3731c065b4bf08dc2e8b2) [#59](https://github.com/wellyshen/react-cool-form/pull/59) Thanks [@wellyshen](https://github.com/wellyshen)! - chore(package.json): adjust description and command
* [`3359813`](https://github.com/wellyshen/react-cool-form/commit/33598136ca8c78d2d0a96ddd09c860caa657339b) [#57](https://github.com/wellyshen/react-cool-form/pull/57) Thanks [@wellyshen](https://github.com/wellyshen)! - docs: update README
## 0.0.5
### Patch Changes
- [`ade598e`](https://github.com/wellyshen/react-cool-form/commit/ade598ece6caa28026363100311b4a9d0ed14035) [#55](https://github.com/wellyshen/react-cool-form/pull/55) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): adjust layout
## 0.0.4
### Patch Changes
- [`556bba9`](https://github.com/wellyshen/react-cool-form/commit/556bba90ebd88076e0a02548d899a31d27e26958) [#54](https://github.com/wellyshen/react-cool-form/pull/54) Thanks [@wellyshen](https://github.com/wellyshen)! - docs(readme): edit title section
* [`014f148`](https://github.com/wellyshen/react-cool-form/commit/014f1485d748fbb4332c5cf7e168bb76bce15330) [#51](https://github.com/wellyshen/react-cool-form/pull/51) Thanks [@wellyshen](https://github.com/wellyshen)! - chore(package.json): edit description
- [`ad9b72a`](https://github.com/wellyshen/react-cool-form/commit/ad9b72a21a8ae7d95489313336241d504d6645d2) [#53](https://github.com/wellyshen/react-cool-form/pull/53) Thanks [@wellyshen](https://github.com/wellyshen)! - fix: empty package
## 0.0.3
### Patch Changes
- [`5c397c0`](https://github.com/wellyshen/react-cool-form/commit/5c397c035e0955d1be46a8f794879da459d36982) [#49](https://github.com/wellyshen/react-cool-form/pull/49) Thanks [@wellyshen](https://github.com/wellyshen)! - chore(package.json): add keyword
* [`5c397c0`](https://github.com/wellyshen/react-cool-form/commit/5c397c035e0955d1be46a8f794879da459d36982) [#49](https://github.com/wellyshen/react-cool-form/pull/49) Thanks [@wellyshen](https://github.com/wellyshen)! - chore(package.json): add description
- [`5c397c0`](https://github.com/wellyshen/react-cool-form/commit/5c397c035e0955d1be46a8f794879da459d36982) [#49](https://github.com/wellyshen/react-cool-form/pull/49) Thanks [@wellyshen](https://github.com/wellyshen)! - chore(package.json): edit keyword
* [`5c397c0`](https://github.com/wellyshen/react-cool-form/commit/5c397c035e0955d1be46a8f794879da459d36982) [#49](https://github.com/wellyshen/react-cool-form/pull/49) Thanks [@wellyshen](https://github.com/wellyshen)! - chore(package.json): add keyword
- [`5c397c0`](https://github.com/wellyshen/react-cool-form/commit/5c397c035e0955d1be46a8f794879da459d36982) [#49](https://github.com/wellyshen/react-cool-form/pull/49) Thanks [@wellyshen](https://github.com/wellyshen)! - chore(package.json): edit keyword
* [`5c397c0`](https://github.com/wellyshen/react-cool-form/commit/5c397c035e0955d1be46a8f794879da459d36982) [#49](https://github.com/wellyshen/react-cool-form/pull/49) Thanks [@wellyshen](https://github.com/wellyshen)! - chore(package.json): add keyword
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
- Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
- The use of sexualized language or imagery, and sexual attention or
advances of any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or email
address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
hivoid19@gmail.com.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
[https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
Community Impact Guidelines were inspired by
[Mozilla's code of conduct enforcement ladder][mozilla coc].
For answers to common questions about this code of conduct, see the FAQ at
[https://www.contributor-covenant.org/faq][faq]. Translations are available
at [https://www.contributor-covenant.org/translations][translations].
[homepage]: https://www.contributor-covenant.org
[v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
[mozilla coc]: https://github.com/mozilla/diversity
[faq]: https://www.contributor-covenant.org/faq
[translations]: https://www.contributor-covenant.org/translations
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to React Cool Form
When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
Please note we have a [code of conduct](CODE_OF_CONDUCT.md), please follow it in all your interactions with the project.
> Working on your first Pull Request? You can learn how from [this free video series](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
## Pull Request Process
1. Fork the repository and create your branch from `master`.
2. Run `yarn` to install dependencies.
3. If you’ve fixed a bug or added code that should be tested.
4. Ensure the test suite passes by running `yarn test`.
5. Update related [documents](docs) with details of changes to the interface.
6. Update related [examples](examples) if needed.
7. Make sure your code lints by running `yarn lint`.
8. Run `yarn changeset` to [add a changeset](https://github.com/atlassian/changesets/blob/master/docs/adding-a-changeset.md).
## Development Workflow
You can test new features or debug an issue by the way that I'm using.
1. Run `yarn link-pkg` to link the package into the [app directory](app).
2. Run `yarn start` to create an `ESM` build and type definition file by `rollup` watch mode.
3. Access the [app directory](app).
4. In the **app directory**, run `yarn link-pkg` to link with the package then run `yarn start:dev` to start development.
5. Try something cool via the [Playground](app/src/Playground).
## Useful Commands
There're several useful commands that you can use during the development:
- `yarn link-pkg` links the package into the [app directory](app). You can develop or debug it via the [playground](app/src/App).
- `yarn start` creates a `dist` folder with an `ESM` build and type definition file by `rollup` watch mode.
- `yarn build:dev` creates a `dist` folder with an `ESM` build and type definition file for development.
- `yarn build:prod` creates a `dist` folder with package builds (`CJS`, `ESM`, and `UMD`) and type definition file. You can test the package locally via `yarn link-pkg` or [yarn link](https://yarnpkg.com/lang/en/docs/cli/link).
- `yarn changeset` [adds a changeset](https://github.com/atlassian/changesets/blob/master/docs/adding-a-changeset.md).
- `yarn lint:code` lints all `.js` and `.tsx?` files.
- `yarn lint:type` runs the [TypeScript](https://www.typescriptlang.org) type-checks.
- `yarn lint:format` formats all files except the file list of `.prettierignore`.
- `yarn lint` lints `code`, `type`, and `format`.
- `yarn test` runs the complete test suite.
- `yarn test:watch` runs an interactive test watcher (helpful in development).
- `yarn test:cov` runs the complete test suite with coverage report.
- `yarn size` checks the bundle size of each format.
- `yarn clean:build` deletes the `dist` build folder.
- `yarn clean:size`: deletes the `.size-snapshot.json` file.
- `yarn clean:cov` deletes the `coverage` report folder.
- `yarn clean` deletes the build, coverage, and size snapshot.
## Style Guide
We use [ESLint](https://eslint.org), [StyleLint](https://stylelint.io) and [Prettier](https://prettier.io) for code style and formatting. Run `yarn lint` after making any changes to the code. Then, our linter will catch most issues that might exist in your code.
However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [Airbnb’s Style Guide](https://github.com/airbnb/javascript) will guide you in the right direction.
## License
By contributing to React Cool Form, you agree that your contributions will be licensed under its MIT license.
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2021 Welly Shen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
> ⚠️ Thank you for supporting me, this library isn't maintained anymore. Please consider other libraries.
<p align="center">
<br/><br/>
<a href="https://react-cool-form.netlify.app" title="React Cool Form"><img src="https://react-cool-form.netlify.app/img/logo-github.svg" width="300px" alt="React Cool Form"></a>
</p>
<p align="center">React hooks for forms state and validation, less code more performant.</p>
<div align="center">
[](https://www.npmjs.com/package/react-cool-form)
[](https://www.npmtrends.com/react-cool-form)
[](https://coveralls.io/github/wellyshen/react-cool-form?branch=master)
[](#contributors-)
[](https://app.netlify.com/sites/react-cool-form/deploys)
</div>
## Features
- 🎣 [Easy to use](https://react-cool-form.netlify.app/docs/getting-started/integration-an-existing-form), React Cool Form is [a set of React hooks](https://react-cool-form.netlify.app/docs/api-reference/use-form) that helps you conquer all kinds of forms.
- 🗃 Manages [dynamic](https://react-cool-form.netlify.app/docs/examples/conditional-fields) and [complex](https://react-cool-form.netlify.app/docs/getting-started/complex-structures) form data without hassle.
- 🪄 Manages [arrays and lists](https://react-cool-form.netlify.app/docs/getting-started/arrays-and-lists) data like a master.
- 🚦 Supports [built-in](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#built-in-validation), [form-level](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#form-level-validation), and [field-level](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#field-level-validation) validation.
- 🚀 Highly performant, [minimizes the number of re-renders](https://react-cool-form.netlify.app#performance-matters) for you.
- 🧱 Seamless integration with existing HTML form inputs or [3rd-party UI libraries](https://react-cool-form.netlify.app/docs/getting-started/3rd-party-ui-libraries).
- 🎛 Super flexible [API](https://react-cool-form.netlify.app/docs/api-reference/use-form) design, built with [DX and UX](https://react-cool-form.netlify.app/docs) in mind.
- 🔩 Provides useful [utility functions](https://react-cool-form.netlify.app/docs/api-reference/utility-functions) to boost forms development.
- 📜 Supports [TypeScript](https://react-cool-form.netlify.app/docs/getting-started/typescript-support) type definition.
- ☁️ Server-side rendering compatibility.
- 🦔 A [tiny size](https://react-cool-form.netlify.app/docs/getting-started/bundle-size-overview) ([~ 7.1kB gizpped](https://bundlephobia.com/result?p=react-cool-form)) library but powerful.
## [Docs](https://react-cool-form.netlify.app)
See the documentation at [react-cool-form.netlify.app](https://react-cool-form.netlify.app) for more information about using React Cool Form!
Frequently viewed docs:
- [Getting Started](https://react-cool-form.netlify.app/docs)
- [Examples](https://react-cool-form.netlify.app/docs/examples/basic)
- [API Reference](https://react-cool-form.netlify.app/docs/api-reference/use-form)
## Quick Start
To use React Cool Form, you must use `react@16.8.0` or greater which includes hooks. This package is distributed via [npm](https://www.npmjs.com/package/react-cool-form).
```sh
$ yarn add react-cool-form
# or
$ npm install --save react-cool-form
```
Here's the basic concept of how it rocks:
[](https://codesandbox.io/s/rcf-quick-start-j8p1l?fontsize=14&hidenavigation=1&theme=dark)
```js
import { useForm } from "react-cool-form";
const Field = ({ label, id, error, ...rest }) => (
<div>
<label htmlFor={id}>{label}</label>
<input id={id} {...rest} />
{error && <p>{error}</p>}
</div>
);
const App = () => {
const { form, use } = useForm({
// (Strongly advise) Provide the default values
defaultValues: { username: "", email: "", password: "" },
// The event only triggered when the form is valid
onSubmit: (values) => console.log("onSubmit: ", values),
});
// We can enable the "errorWithTouched" option to filter the error of an un-blurred field
// Which helps the user focus on typing without being annoyed by the error message
const errors = use("errors", { errorWithTouched: true }); // Default is "false"
return (
<form ref={form} noValidate>
<Field
label="Username"
id="username"
name="username"
// Support built-in validation
required
error={errors.username}
/>
<Field
label="Email"
id="email"
name="email"
type="email"
required
error={errors.email}
/>
<Field
label="Password"
id="password"
name="password"
type="password"
required
minLength={8}
error={errors.password}
/>
<input type="submit" />
</form>
);
};
```
✨ Pretty easy right? React Cool Form is more powerful than you think. Let's [explore it](https://react-cool-form.netlify.app) now!
## Articles / Blog Posts
> 💡 If you have written any blog post or article about React Cool Form, please open a PR to add it here.
- Featured on [React Status #245](https://react.statuscode.com/issues/245).
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="http://wellyshen.com"><img src="https://avatars.githubusercontent.com/u/21308003?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Welly</b></sub></a><br /><a href="#ideas-wellyshen" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/wellyshen/react-cool-form/commits?author=wellyshen" title="Code">💻</a> <a href="https://github.com/wellyshen/react-cool-form/commits?author=wellyshen" title="Documentation">📖</a> <a href="#infra-wellyshen" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-wellyshen" title="Maintenance">🚧</a></td>
<td align="center"><a href="https://github.com/Chris-James"><img src="https://avatars.githubusercontent.com/u/4596428?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chris</b></sub></a><br /><a href="https://github.com/wellyshen/react-cool-form/issues?q=author%3AChris-James" title="Bug reports">🐛</a></td>
</tr>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
================================================
FILE: SECURITY.md
================================================
# Security Policy
## Supported Versions
Use this section to tell people about which versions of your project are
currently being supported with security updates.
| Version | Supported |
| ------- | ------------------ |
| 5.1.x | :white_check_mark: |
| 5.0.x | :x: |
| 4.0.x | :white_check_mark: |
| < 4.0 | :x: |
## Reporting a Vulnerability
Use this section to tell people how to report a vulnerability.
Tell them where to go, how often they can expect to get an update on a
reported vulnerability, what to expect if the vulnerability is accepted or
declined, etc.
================================================
FILE: app/.eslintignore
================================================
build
================================================
FILE: app/.eslintrc.js
================================================
module.exports = {
extends: ["react-app", "welly"],
rules: { "react/react-in-jsx-scope": "off" },
};
================================================
FILE: app/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
node_modules
.pnp
.pnp.js
# testing
coverage
# production
build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.eslintcache
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: app/.prettierignore
================================================
# testing
coverage
# production
build
# misc
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: app/.stylelintrc.js
================================================
module.exports = {
extends: ["stylelint-config-standard", "stylelint-config-prettier"],
ignoreFiles: ["build/**/*.css"],
};
================================================
FILE: app/README.md
================================================
# App
🧪 A place for trying something interesting.
================================================
FILE: app/package.json
================================================
{
"name": "rcf-app",
"private": true,
"scripts": {
"link-pkg": "yarn link 'react-cool-form'",
"start:auto": "react-scripts start",
"start:dev": "REACT_APP_ENV=dev react-scripts start",
"start:prod": "yarn build && serve -s build",
"build": "react-scripts build",
"lint": "run-s lint:*",
"lint:code": "eslint --fix . --ext .js,.ts,.tsx",
"lint:type": "tsc",
"lint:style": "stylelint --fix \"**/*.{css,ts,tsx}\"",
"lint:format": "prettier -w . -u --loglevel silent",
"clean": "rimraf build",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"@emotion/react": "^11.4.0",
"@types/node": "^16.4.1",
"@types/react": "^17.0.14",
"@types/react-dom": "^17.0.9",
"normalize.css": "^8.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.3.5"
},
"devDependencies": {
"eslint-config-welly": "^1.13.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.3.2",
"rimraf": "^3.0.2",
"serve": "^13.0.2",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^22.0.0"
}
}
================================================
FILE: app/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="React hooks for forms state and validation, less code more performant."
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>React Cool Form</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
================================================
FILE: app/public/manifest.json
================================================
{
"short_name": "REACT COOL IMG",
"name": "REACT COOL IMG",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: app/public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: app/src/App/index.tsx
================================================
import { Global, css } from "@emotion/react";
import normalize from "normalize.css";
import Playground from "../Playground";
import Automation from "../Automation";
import { root } from "./styles";
export default (): JSX.Element => (
<>
<Global
styles={css`
${normalize}
${root}
`}
/>
{process.env.REACT_APP_ENV === "dev" ? <Playground /> : <Automation />}
</>
);
================================================
FILE: app/src/App/styles.ts
================================================
import { css } from "@emotion/react";
// eslint-disable-next-line import/prefer-default-export
export const root = css`
body {
font-family: "Roboto", sans-serif;
}
`;
================================================
FILE: app/src/Automation/index.tsx
================================================
const Automation = (): JSX.Element => <h1>Automation</h1>;
export default Automation;
================================================
FILE: app/src/Playground/index.tsx
================================================
/* eslint-disable no-console */
import { useForm } from "react-cool-form";
export default () => {
const { form, runValidation } = useForm({
// validate: () => ({ foo: "Required" }),
focusOnError: ["foo"],
});
return (
<>
<form ref={form} noValidate>
<input name="foo" required />
<input name="bar" required />
{/* <input type="submit" /> */}
</form>
<button type="button" onClick={() => runValidation(["bar"])}>
Validate
</button>
</>
);
};
================================================
FILE: app/src/index.tsx
================================================
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
document.getElementById("root")
);
================================================
FILE: app/src/react-app-env.d.ts
================================================
/// <reference types="react-scripts" />
/// <reference types="@emotion/react/types/css-prop" />
================================================
FILE: app/src/types/index.d.ts
================================================
declare module "*.css";
================================================
FILE: app/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}
================================================
FILE: babel.config.json
================================================
{
"presets": [
[
"@babel/env",
{
"loose": true,
"exclude": [
"@babel/plugin-transform-async-to-generator",
"@babel/plugin-transform-regenerator"
]
}
],
"@babel/typescript",
"@babel/react"
]
}
================================================
FILE: bundlesize.config.json
================================================
{
"files": [
{
"path": "dist/index.umd.production.min.js",
"maxSize": "7.2 kB"
}
]
}
================================================
FILE: docs/api-reference/use-controlled.md
================================================
---
id: use-controlled
title: useControlled
---
This hook allows us to integrate with an existing component (usually a [controlled component](https://reactjs.org/docs/forms.html#controlled-components)) or 3rd-party UI library in React Cool Form. With this hook, we can easily to create a reusable controller component to fulfill our needs. See the [useControlled Hook](../getting-started/3rd-party-ui-libraries#2-usecontrolled-hook) to learn more.
:::note
When working with [conditional fields](../examples/conditional-fields), please ensure the hook is wrapped in a component.
:::
```js
const [fieldProps, meta] = useControlled(name, config);
```
## Name
`string`
The name of the field. We must provide it when using this hook.
## Config
An `object` with the following options:
### formId
`string`
The [corresponding ID](./use-form#id) of the `useForm` hook. We only need it when using multiple form hooks at the same time.
### defaultValue
`string`
The default value of the field. Useful for dealing with the case of [conditional fields](../examples/conditional-fields).
### validation
`(value: any, values: FormValues) => any | Promise<any>`
A synchronous/asynchronous function that is used for the [field-level validation](../getting-started/validation-guide#field-level-validation).
### parse
`(...args: any[]) => any`
A function that takes the event object (or parameters) of the target component's `onChange` handler and parses the value of the field that you want to store into the [form state](../getting-started/form-state#about-the-form-state). Useful for data type converting.
### format
`(value: any) => any`
A function that takes the field's value from the [form state](../getting-started/form-state#about-the-form-state) and formats the value to give to the field. Usually used in conjunction with `parse`.
### errorWithTouched
`boolean`
Enable/disable the feature of **filtering untouched errors**, which can help the user focus on typing without being annoyed by the error message. Default is `false`.
```js
// Current state: { errors: { foo: "Required" }, touched: {} }
// Returns "Required"
const [, { error }] = useControlled("foo");
// Current state: { errors: { foo: "Required" }, touched: {} }
// Returns undefined
const [, { error }] = useControlled("foo", { errorWithTouched: true });
// Current state: { errors: { foo: "Required" }, touched: { foo: true } }
// Returns "Required"
const [, { error }] = useControlled("foo", { errorWithTouched: true });
```
### ...restProps
Any other props that will be spread into the `fieldProps`.
## Field Props
An `object` with the following properties:
### name
`string`
The name of the field.
### value
`any`
The value of the field.
### onChange
`(...event: any[]) => void`
An event handler called when the field's value changed.
### onBlur
`(e: React.FocusEvent) => void`
An event handler called when the field loses focus.
### ...restProps
Any other props that were passed to the `config`.
## Meta
An `object` with the following properties:
### error
`string | undefined`
The current validation error of the field.
### isTouched
`boolean`
To indicate whether the field has been touched/visited.
### isDirty
`boolean`
To indicate whether the field has been modified.
## Example
The example demonstrates the basic usage of this hook.
:::note
When using the hook (and not working with [field-array](../getting-started/arrays-and-lists#dealing-with-array-fields)), a default value is required.
:::
```js
import { useControlled } from "react-cool-form";
const Field = ({
as,
name,
defaultValue,
validate,
parse,
format,
errorWithTouched,
...restProps
}) => {
const [fieldProps, { error, isTouched, isDirty }] = useControlled(name, {
defaultValue,
validate,
parse,
format,
errorWithTouched,
...restProps,
});
const Component = as;
return <Component {...fieldProps} />;
};
```
================================================
FILE: docs/api-reference/use-field-array.md
================================================
---
id: use-field-array
title: useFieldArray
---
This hook supplies you with functions for manipulating the array/list of fields, it's fast! See the [Arrays and Lists](../getting-started/arrays-and-lists) to learn more.
```js
const [fields, helpers] = useFieldArray(name, config);
```
## Name
`string`
The name of the field. We must provide it when using this hook.
## Config
An `object` with the following options:
### formId
`string`
The [corresponding ID](./use-form#id) of the `useForm` hook. We only need it when using multiple form hooks at the same time.
### defaultValue
`string`
The default value of the field. Useful for dealing with the case of [conditional fields](../examples/conditional-fields).
### validation
`(value: any, values: FormValues) => any | Promise<any>`
A synchronous/asynchronous function that is used for the [field-level validation](../getting-started/validation-guide#field-level-validation).
## Fields
`string[]`
An array that holds field names (e.g. `foo[0]`, `foo[1]`), which can be used for the `key` and `name` attributes of a field.
- It refers to the location of the field in the [form state](../getting-started/form-state#about-the-form-state). If the referenced value isn't an `array` type, returns an empty array instead.
- It doesn't include the field data. If you need to access the data, use the [use](./use-form#use) or [getState](./use-form#getstate) methods.
```js
const [fields] = useFieldArray("foo", { defaultValue: [{ name: "Iron Man" }] });
// The first parameter of the callback supplies you a field name (e.g. foo[0], foo[1])
fields.map((fieldName) => (
<input
key={fieldName} // Use the "fieldName" as the key
name={`${fieldName}.name`} // Use the "fieldName" + "YOUR PATH" as the name
/>
));
```
## Helpers
An `object` with the following methods:
### push
`(value: FieldValue, options?: Object) => void`
Add a value to the end of an array.
```js
const handleAdd = () => {
push(
{ name: "Iron Man" },
{
shouldTouched: false, // (Default = false) Set the field as touched
shouldDirty: true, // (Default = true) Set the field as dirty
}
);
};
```
### insert
`(index: number, value: FieldValue, options?: Object) => void`
Insert an element at a given index into the array.
```js
const handleInsert = () => {
insert(
0,
{ name: "Iron Man" },
{
shouldTouched: false, // (Default = false) Set the field as touched
shouldDirty: true, // (Default = true) Set the field as dirty
}
);
};
```
### swap
`(indexA: number, indexB: number) => void`
Swap two values in an array.
### move
`(from: number, to: number) => void`
Move an element in an array to another index.
### remove
`(index: number) => FieldValue`
Remove an element at an index of an array and return it.
## Example
The example demonstrates the basic usage of this hook.
```js
import { useForm, useFieldArray } from "react-cool-form";
const App = () => {
const { form } = useForm({
defaultValues: { foo: [{ name: "Iron Man" }] },
});
const [fields, { push, insert, move, swap, remove }] = useFieldArray("foo");
return (
<form ref={form}>
{/* The first parameter of the callback supplies you a field name (e.g. foo[0], foo[1]) */}
{fields.map((fieldName) => (
<input
key={fieldName} // Use the "fieldName" as the key
name={`${fieldName}.name`} // Use the "fieldName" + "YOUR PATH" as the name
/>
))}
</form>
);
};
```
================================================
FILE: docs/api-reference/use-form-methods.md
================================================
---
id: use-form-methods
title: useFormMethods
---
This hook allows us to use [all of the methods](./use-form#methods) provided by React Cool Form from a component at any level. See the [Do It Yourself](../getting-started/3rd-party-ui-libraries#3-do-it-yourself) to learn more.
```js
const methods = useFormMethods(formId);
```
## formId
`string`
The [corresponding ID](./use-form#id) of the `useForm` hook. We only need it when using multiple form hooks at the same time.
## methods
The [methods](./use-form#methods) are the same as the `useForm` hook.
## Example
The example demonstrates the basic usage of this hook.
```js
import { useFormMethods } from "react-cool-form";
const Field = ({ as, name, onFocus, ...restProps }) => {
const { clearErrors, ...otherMethods } = useFormMethods();
const Component = as;
return (
<Component
name={name}
onFocus={(e) => {
clearErrors(name);
if (onFocus) onFocus(e);
}}
{...restProps}
/>
);
};
```
================================================
FILE: docs/api-reference/use-form-state.md
================================================
---
id: use-form-state
title: useFormState
---
This hook can be used for two purposes:
- Isolating re-rendering: It helps us to isolate re-rendering at the component level for performance optimization (see [related article](https://overreacted.io/before-you-memo)). The API design similar to the [use](./use-form#use) method of the `useForm` that maintain a consistent DX for us. See the [Isolating Re-rendering](../getting-started/form-state#isolating-re-rendering) to learn more.
- On state change event: To listen for changes to properties in the [form state](../getting-started/form-state#about-the-form-state) without triggering re-renders. See the [On State Change Event](../getting-started/form-state#on-state-change-event) to learn more.
```js
// Isolating re-rendering mode
const props = useFormState(path, config);
// On state change event mode
useFormState(path, callback, formId);
```
## Path
`string | string[] | Record<string, string>`
The path of the property we want to access from the [form state](../getting-started/form-state#about-the-form-state). We can construct the return values as follows.
- Every time an accessed value changed that will trigger re-renders. Thus, there're [some guidelines](../getting-started/form-state#best-practices) for us to use the form state.
- You can access the form's values without the `values.` prefix, ya! it's a shortcut for for your convenience.
```js
// Getting a value
const foo = useFormState("values.foo");
// Shortcut for getting a value
const foo = useFormState("foo");
// Array pick
const [foo, bar] = useFormState(["values.foo", "values.bar"]);
// Object pick
const { foo, bar } = useFormState({ foo: "values.foo", bar: "values.bar" });
```
## Config
An `object` with the following options:
### formId
`string`
The [corresponding ID](./use-form#id) of the `useForm` hook. We only need it when using multiple form hooks at the same time.
### defaultValues
`FormValues`
The alternative default values for this hook to return when we didn't provide them via the [defaultValues option](./use-form#defaultvalues) of the `useForm`. Two common use cases of this option are as follows:
- Setting a default value for a field via the `defaultValue` attribute.
- Setting a default value for a field via the `useControlled`'s [defaultValue option](./use-controlled#defaultvalue).
### errorWithTouched
`boolean`
Enable/disable the feature of **filtering untouched errors**, which can help the user focus on typing without being annoyed by the error message. Default is `false`.
```js
// Current state: { errors: { foo: "Required" }, touched: {} }
// Returns { foo: "Required" }
const errors = useFormState("errors");
// Current state: { errors: { foo: "Required" }, touched: {} }
// Returns {}
const errors = useFormState("errors", { errorWithTouched: true );
// Current state: { errors: { foo: "Required" }, touched: { foo: true } }
// Returns { foo: "Required" }
const errors = useFormState("errors", { errorWithTouched: true );
```
## Callback
`(props: any) => void`
It's called on any of the subscribed properties in the [form state](../getting-started/form-state#about-the-form-state) change. It takes the properties as the parameter.
## FormId
`string`
An optional parameter that works the same as the [config.formId](#formid).
## Example
The example demonstrates the basic usage of this hook.
```js
import { useFormState } from "react-cool-form";
// To isolate re-rendering at the component level
const IsolatedComponent = () => {
const foo = useFormState("foo");
return <div>{foo}</div>;
};
// To listen for the changes of a field value
useFormState("foo", (foo) => console.log(foo));
```
================================================
FILE: docs/api-reference/use-form.md
================================================
---
id: use-form
title: useForm
---
This is a custom React [hook](https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook) that helps you with building forms. It takes `config` parameters and returns useful methods as follows.
```js
const methods = useForm(config);
```
## Config
An `object` with the following options:
### id
`string`
The ID of the hook, it's used to pair with the related hook(s) of React Cool Form. We only need it when using multiple form hooks at the same time.
### defaultValues
`Record<string, any>`
Default field values of the form. In most case (especially working with TypeScript), we should use it to initialize a field's value and use the [defaultValue/defaultChecked](https://reactjs.org/docs/uncontrolled-components.html#default-values) attribute for the case of [conditional fields](../examples/conditional-fields). The `defaultValues` also used to compare against the current values to calculate `isDirty` and `dirty`.
- The `defaultValues` is cached **at the first render** within the custom hook. If you want to reset it or [lazily set it](../examples/lazy-default-values), you can use the [reset](#reset) method.
### excludeFields
`string[]`
Tell React Cool Form to exclude field(s) by passing in the `name`/`id`/`class` of the field. You can also exclude a field via the pre-defined `data-rcf-exclude` attribute.
- The `excludeFields` and `data-rcf-exclude` won't affect the functionality of the [useControlled](./use-controlled).
```js {3,12}
const App = () => {
const { form } = useForm({
excludeFields: ["foo", "#bar", ".baz"],
});
return (
<form ref={form}>
<input name="foo" />
<input id="bar" />
<input className="baz" />
{/* Excluding via the pre-defined data attribute */}
<input data-rcf-exclude />
</form>
);
};
```
👉🏻 See the [Exclude Fields](../getting-started/integration-an-existing-form#exclude-fields) to learn more.
### builtInValidationMode
`"message" | "state" | false`
We can configure the [mode of the built-in validation](../getting-started/validation-guide#displaying-error-messages) as follows:
- `"message"` (default): Returns [a localized message](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage) that describes the validation constraints that the field does not satisfy (if any)
- `"state"`: Returns the **key of the invalid property** (e.g. "valueMissing", "tooShort", etc.) of the [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) (if any)
- `false`: Disable the [built-in validation](../getting-started/validation-guide#built-in-validation)
### validateOnChange
`boolean`
Tell React Cool Form to run validations on `change` events as well as the [setValue](#setvalue) method. Default is `true`.
### validateOnBlur
`boolean`
Tell React Cool Form to run validations on `blur` events. Default is `true`.
### focusOnError
`boolean | string[] | (names: string[]) => string[]`
Tell React Cool Form to apply focus to the first field with an error upon an attempted form submission. Default is `true`.
- Only native input elements that support [HTMLElement.focus()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus) will work.
- The focus order is based on the field order (i.e. top-to-bottom and left-to-right).
```js
// Current fields: { foo: "", bar: "", baz: "" }
// Disable this feature
const methods = useForm({ focusOnError: false });
// Change the focus order by passing in field names
const methods = useForm({ focusOnError: ["bar", "foo", "baz"] });
// Change the focus order by modifying existing field names
const methods = useForm({
focusOnError: (names) => {
[names[0], names[1]] = [names[1], names[0]];
return names;
},
});
```
### removeOnUnmounted
`boolean | string[] | (names: string[]) => string[]`
By default, React Cool Form automatically removes the **related state** (i.e. value, error, touched, dirty) and **default value** of an unmounted field for us. However, we can set the `removeOnUnmounted` to `false` to maintain all the data or give it field names to maintain partial data. Default is `true`.
- To keep a default value existing between a dynamically show/hide field, we can set it via `defaultValue` attribute or option.
- If this feature doesn't meet your needs, you can use the [removeField](#removefield) to control what data that you want to remove instead.
```js
// Current values: { foo: "🍎", bar: "🍋", baz: "🥝" }
// Keep all the data
const methods = useForm({ removeOnUnmounted: false });
// Keep partial data (i.e. "bar" and "baz") by passing in field names
const methods = useForm({ removeOnUnmounted: ["foo"] });
// Keep partial data (i.e. "bar" and "baz") by modifying existing field names
const methods = useForm({
removeOnUnmounted: (names) => names.filter((name) => name === "foo"),
});
```
👉🏻 See the [conditional fields](../examples/conditional-fields) example to learn more.
### validate
`(values: FormValues) => FormErrors | false | void | Promise<FormErrors | false | void>`
A synchronous/asynchronous function that is used for the [form-level validation](../getting-started/validation-guide#form-level-validation). It takes all the form's values and returns any validation errors (or returns `undefined` if there's no error). The validation errors must be in the same shape as the values of the form.
### onSubmit
`(values: FormValues, options: Object, e?: Event) => void | Promise<void>`
The form submission handler will be called when the form is submitted (or when the [submit](#submit) method is called) and validated successfully. It takes the following parameters:
```js
const methods = useForm({
onSubmit: async (
values,
{
getState,
setValue,
setTouched,
setDirty,
setError,
focus,
runValidation,
removeField,
submit,
reset,
},
e
) => {
/* Do something... */
},
});
```
👉🏻 See the [Form Submission](../getting-started/form-submission) to learn more.
### onError
`(errors: FormErrors, options: Object, e?: Event) => void`
The form error handler that is called when the form is submitted (or when the [submit](#submit) method is called) and validated failed. It takes the following parameters:
```js
const methods = useForm({
onError: (
errors,
{
getState,
setValue,
setTouched,
setDirty,
setError,
focus,
runValidation,
removeField,
submit,
reset,
},
e
) => {
/* Do something... */
},
});
```
👉🏻 See the [Form Submission](../getting-started/form-submission) to learn more.
### onReset
`(values: FormValues, options: Object, e?: Event) => void`
The form reset handler that is called when the form is reset (or when the [reset](#reset) method is called). It takes the following parameters:
```js
const methods = useForm({
onReset: (
values,
{
getState,
setValue,
setTouched,
setDirty,
setError,
focus,
runValidation,
removeField,
submit,
reset,
},
e
) => {
/* Do something... */
},
});
```
👉🏻 See the [Reset Form](../getting-started/reset-form) to learn more.
### onStateChange
`(formState: FormState) => void`
The form state change handler that is called on every state change. It's useful for **debugging** or **triggering a handler**.
- Want to trigger a handler based on certain properties in the form state? Check out the [useFormState](./use-form-state) to learn more.
- `formState` is readonly and should not be mutated directly.
```js
const methods = useForm({
onStateChange: (formState) => console.log("State: ", formState),
});
```
## Methods
An `object` with the following methods:
### form
`(element: HTMLElement) => void`
This method allows us to integrate [an existing form](../getting-started/integration-an-existing-form#hook-into-a-form) or [a container where inputs are used](../getting-started/integration-an-existing-form#without-using-a-form-element) with React Cool Form.
### field
`(validateOrOptions: Function | Object) => Function`
This method allows us to do [field-level validation](../getting-started/validation-guide#field-level-validation) and data type conversion via the `ref` attribute. For the data type conversion, React Cool Form supports the [valueAsNumber](https://www.w3.org/TR/2011/WD-html5-20110405/common-input-element-attributes.html#dom-input-valueasnumber), [valueAsDate](https://www.w3.org/TR/2011/WD-html5-20110405/common-input-element-attributes.html#dom-input-valueasdate), and custom parser.
- For your convenience, the values of `<input type="number">` and `<input type="radio">` are converted to `number` by default.
- When using this method with the [useControlled](./use-controlled), the functionality of the method will be replaced.
```js
const { field } = useForm();
<input
name="foo"
type="date"
ref={field({
validate: (value, values /* Form values */) => !value.length && "Required",
valueAsNumber: true, // (Default = false) Returns a number representing the field's value if applicable, otherwise, returns "NaN"
valueAsDate: true, // (Default = false) Returns a Date object representing the field's value if applicable, otherwise, returns "null"
parse: (value) => customParser(value), // Returns whatever value you want through the callback
})}
/>;
```
If you just want to validate the field, there's a shortcut for it:
```js
<input nam="foo" ref={field((value) => !value.length && "Required")} />
```
### focus
`(name: string, delay?: number) => void`
This method allows us to apply focus to a field. If you want to focus on the first field of a nested fields, you can just pass in the parent path as below.
:::note
When working with [Arrays and Lists](../getting-started/arrays-and-lists), we need to set `delay` (delay = 0 is acceptable) to wait for a field rendered before applying focus to it.
:::
```js {7,12}
const App = () => {
const { form, focus } = useForm();
useEffect(() => {
// Will focuses on the first field after 0.5 second
// It works the same as `focus("foo.a", 500)`
focus("foo", 500);
}, []);
return (
<form ref={form}>
<input name="foo.a" />
<input name="foo.b" />
<input name="foo.c" />
<input type="submit" />
</form>
);
};
```
👉🏻 See the [Applying Focus](../getting-started/arrays-and-lists#applying-focus) to learn more.
### use
`(path: string | string[] | Record<string, string>, options?: Object) => any`
This method provides us a performant way to use the form state with minimized re-renders. See the [Form State](../getting-started/form-state) to learn more.
### getState
`(path?: string | string[] | Record<string, string>) => any`
This method allows us to read the form state without triggering re-renders. See the [Reading the State](../getting-started/form-state#reading-the-state) to learn more.
### setValue
`(name: string, value: any | Function, options?: Object) => void`
This method allows us to manually set/clear the value of a field. Useful for creating custom field change handlers.
```js
const { setValue } = useForm();
setValue("fieldName", "value", {
shouldValidate: true, // (Default = "validateOnChange" option) Triggers field validation
shouldTouched: true, // (Default = true) Sets the field as touched
shouldDirty: true, // (Default = true) Sets the field as dirty
});
// We can also pass a callback as the "value" parameter, similar to React's setState callback style
setValue("fieldName", (prevValue) => prevValue.splice(2, 0, "🍎"));
```
We can clear the value of a field by the following way:
```js
setValue("fieldName", undefined); // The field will be unset: { fieldName: "value" } → {}
```
### setTouched
`(name: string, isTouched?: boolean, options?: Object) => void`
This method allows us to manually set/clear the touched of a field. Useful for creating custom field touched handlers.
```js
const { setTouched } = useForm();
// Common use case
setTouched("fieldName");
// Full parameters
setTouched(
"fieldName",
true, // (Default = true) Sets the field as touched
{
shouldValidate: true, // (Default = "validateOnBlur" option) Triggers field validation
}
);
```
We can clear the touched of a field by the following way:
```js
setTouched("fieldName", false); // The touched will be unset: { fieldName: true } → {}
```
### setDirty
`(name: string, isDirty?: boolean) => void`
This method allows us to manually set/clear the dirty of a field. Useful for creating custom field dirty handlers.
```js
const { setDirty } = useForm();
// Common use case
setDirty("fieldName");
```
We can clear the dirty of a field by the following way:
```js
setDirty("fieldName", false); // The dirty will be unset: { fieldName: true } → {}
```
### setError
`(name: string, error: any | Function) => void`
This method allows us to manually set/clear the error of a field. Useful for creating custom field error handlers.
```js
const { setError } = useForm();
setError("fieldName", "Required");
// We can also pass a callback as the "error" parameter, similar to React's setState callback style
setError("fieldName", (prevError) => (prevError ? "Too short" : "Required"));
```
We can clear the error of a field by the following way (or using [clearErrors](#clearerrors)):
```js
setError("fieldName", undefined); // Or any falsy values, the error will be unset: { fieldName: "Required" } → {}
```
### clearErrors
`(name?: string | string[]) => void`
This method allows us to manually clear errors (or an error). Useful for creating custom field error handlers.
```js
const { clearErrors } = useForm();
// Current errors: { foo: { bar: "Required", baz: "Required" }, qux: "Required" }
clearErrors(); // Clears all errors. Result: {}
clearErrors("foo"); // Clears both "foo.bar" and "foo.baz". Result: { qux: "Required" }
clearErrors(["foo.bar", "foo.baz"]); // Clears "foo.bar" and "foo.baz" respectively. Result: { foo: {}, qux: "Required" }
```
### runValidation
`(name?: string | string[], options?: Object) => Promise<boolean>`
This method allows us to manually run validation for the form or field(s).
- It returns a `boolean` that indicates the validation results, `true` means valid, `false` otherwise.
- Please note, when enabling the [Filter Untouched Field Errors](../getting-started/form-state#filter-untouched-field-errors), only the errors of the touched fields are accessible.
```js
const { runValidation } = useForm();
// Validates the form (i.e. all the fields)
runValidation();
// Validates single field
runValidation("fieldName");
// Validates multiple fields
runValidation(["fieldName1", "fieldName2"]);
// With result
const validateForm = async () => {
const isValid = await runValidation();
console.log("The form is: ", isValid ? "valid" : "invalid");
};
// Full parameters
runValidation("fieldName", {
shouldFocus: true, // (Default = "focusOnError" option) To focus to the first field with an error within the specified fields
});
```
👉🏻 See the [Validation Guide](../getting-started/validation-guide) to learn more.
### removeField
`(name: string, exclude?: string[]) => void`
This method allows us to manually remove the **related state** (i.e. value, error, touched, dirty) and **default value** of a field, it also excludes a field from the form.
- By default, React Cool Form automatically [removes an unmounted field](#removeonunmounted) for us but this method gives us the ability to control what data that we want to remove.
```js {4,10}
const App = () => {
const [show, setShow] = useState(true);
const { form, removeField } = useForm({
removeOnUnmounted: false, // Disable the feature of automatically removing fields
});
const handleToggle = () => {
setShow(!show);
// We can exclude these data: ["defaultValue", "value", "error", "touched", "dirty"]
if (!show) removeField("foo", ["defaultValue"]); // Keep the default value
};
return (
<form ref={form}>
<input type="checkbox" onChange={handleToggle} data-rcf-exclude />
{show && <input name="foo" />}
{/* Other fields... */}
</form>
);
};
```
### submit
`(e?: Event) => Promise<Result>`
This method allows us to manually submit the form, it returns a promise with the following results. Useful for meeting the needs of custom design.
- Returns a promise with `errors` when any validation errors
- Returns a promise with `values` when the form is validated successfully
```js
const { submit } = useForm({
onSubmit: (values, options, e) => console.log("onSubmit: ", values), // Triggered on form submit + valid
onError: (errors, options, e) => console.log("onError: ", errors), // Triggered on form submit + invalid
});
const handleFormSubmit = async (e) => {
const { errors, values } = await submit(e); // Pass the event object to the event handlers
if (errors) {
// Do something for invalid case
} else {
// Do something for valid case
}
};
```
👉🏻 See the [Form Submission](../getting-started/form-submission) to learn more.
### reset
`(values?: FormValues | Function | null, exclude?: string[] | null, e?: Event) => void`
This method allows us to manually reset the form. It will restore the form to its default values as well as reset/clear all the [related state](../getting-started/form-state#about-the-form-state).
- We can pass `values` as an optional parameter to update the default values.
- We can pass `exclude` as an optional parameter to prevent specific [state](../getting-started/form-state#about-the-form-state) from reset.
```js
const { reset } = useForm({
defaultValues: { firstName: "", lastName: "" },
onReset: (values, options, e) => console.log("onReset: ", values), // Triggered on form reset
});
const handleFormReset = (e) => {
reset(
{ firstName: "Welly", lastName: "Shen" }, // Update the default values
["isSubmitted", "submitCount"], // Don't reset the "isSubmitted" and "submitCount" state
e // Pass the event object to the "onReset" handler
);
// We can also pass a callback as the "values" parameter, similar to React's setState callback style
reset((prevValues) => ({ ...prevValues, firstName: "Bella" }));
};
```
👉🏻 See the [Reset Form](../getting-started/reset-form) to learn more.
================================================
FILE: docs/api-reference/utility-functions.md
================================================
---
id: utility-functions
title: Utility Functions
---
React Cool Form exports useful utility functions that can help you handle [complex structures](../getting-started/complex-structures) efficiently.
```js
import { get, set, unset } from "react-cool-form";
```
## get
`(object: Record<string, any>, path: string, defaultValue?: unknown) => any`
Gets the value at path of object. If the resolved value is `undefined`, the `defaultValue` is returned in its place.
```js {8}
import { useForm, get } from "react-cool-form";
const { form } = useForm({
defaultValues: { foo: { bar: { baz: "" } } },
validate: (values) => {
const errors = {};
if (!get(values, "foo.bar.baz", "")) errors.foo.bar.baz = "Required";
return errors;
},
// ...
});
```
## set
`(object: Record<string, any>, path: string, value: unknown, immutable?: boolean) => any`
Sets the value at `path` of `object`. If a portion of `path` doesn't exist, it's created. Arrays are created for missing index properties while objects are created for all other missing properties.
```js {10,12}
import { useForm, set } from "react-cool-form";
const { form } = useForm({
defaultValues: { foo: { bar: { baz: "" } } },
validate: (values) => {
const errors = {};
if (!values.foo.bar.baz) {
// Mutable way
set(errors, "foo.bar.baz", "Required");
// Immutable way
errors = set(errors, "foo.bar.baz", "Required", true);
}
return errors;
},
// ...
});
```
## unset
`(object: Record<string, any>, path: string, immutable?: boolean) => any`
Removes the property at `path` of `object`.
- If the property remains empty, the parent properties will be removed as well.
- It will clear the redundant `empty` or `undefined` element(s) of an array.
```js {12,14}
import { useForm, unset } from "react-cool-form";
const { form } = useForm({
defaultValues: { foo: { bar: { baz: "" } } },
validate: (values) => {
const errors = {};
if (!values.foo.bar.baz) {
// ...
} else {
// Mutable way
unset(errors, "foo.bar.baz");
// Immutable way
errors = unset(errors, "foo.bar.baz", true);
}
return errors;
},
// ...
});
```
================================================
FILE: docs/examples/arrays-and-lists.md
================================================
---
id: arrays-and-lists
title: Arrays and Lists
hide_table_of_contents: true
---
This example demonstrates how to work with array fields in React Cool Form.
<iframe src="https://codesandbox.io/embed/rcf-arrays-and-lists-crv9d?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Arrays and Lists"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/basic.md
================================================
---
id: basic
title: Basic
hide_table_of_contents: true
---
This example demonstrates how to use form inputs (input, select, and textarea) to build a form with no validation.
<iframe src="https://codesandbox.io/embed/happy-paper-17fz0?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Basic"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/built-in-validation.md
================================================
---
id: built-in-validation
title: Built-in Validation
hide_table_of_contents: true
---
This example demonstrates how to use [HTML form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#Using_built-in_form_validation) to validate a form.
<iframe src="https://codesandbox.io/embed/rcf-built-in-validation-1h28u?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Built-in Validation"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/checkboxes.md
================================================
---
id: checkboxes
title: Checkboxes
hide_table_of_contents: true
---
This example demonstrates how to use React Cool Form with a checkbox group and how to validate it. Given that fields all the share `name` and the respective `value`, React Cool Form will automatically bind them into a single array.
<iframe src="https://codesandbox.io/embed/rcf-checkboxes-z80f3?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Checkboxes"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/complex-strcutures.md
================================================
---
id: complex-structures
title: Complex Structures
hide_table_of_contents: true
---
This example demonstrates how to handle [Complex Structures](../getting-started/complex-structures) in React Cool Form.
<iframe src="https://codesandbox.io/embed/rcf-complex-structures-4x4n1?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Complex Structures"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/conditional-fields.md
================================================
---
id: conditional-fields
title: Conditional Fields
hide_table_of_contents: true
---
By default, when a form input element ([input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), and [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)) is unmounted, React Cool Form will auto remove it for us. Useful for dealing with conditional fields, let's take a look at the following example:
<iframe src="https://codesandbox.io/embed/rcf-conditional-fields-rnxe6?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Conditional Fields"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/custom-field.md
================================================
---
id: custom-field
title: Custom Field
hide_table_of_contents: true
---
This example demonstrates how to combine the [useFormState](../api-reference/use-form-state) and [useFormMethods](../api-reference/use-form-methods) to DIY a custom field.
<iframe src="https://codesandbox.io/embed/rcf-custom-field-p9lqi?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Custom Field"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/field-level-validation.md
================================================
---
id: field-level-validation
title: Field-level Validation
hide_table_of_contents: true
---
This example demonstrates how to validate a form by the [field](../api-reference/use-form#field) method of React Cool Form.
<iframe src="https://codesandbox.io/embed/rcf-field-level-validation-dbklg?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Field-level Validation"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/form-level-validation.md
================================================
---
id: form-level-validation
title: Form-level Validation
hide_table_of_contents: true
---
This example demonstrates how to validate a form by the [validate](../api-reference/use-form#validate) option of React Cool Form.
<iframe src="https://codesandbox.io/embed/rcf-form-level-validation-2if7r?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Form-level Validation"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/form-submission.md
================================================
---
id: form-submission
title: Form Submission
hide_table_of_contents: true
---
This example demonstrates how to submit a form in React Cool Form.
<iframe src="https://codesandbox.io/embed/rcf-form-submission-qixkl?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Form Submission"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/isolating-rerendering.md
================================================
---
id: isolating-rerendering
title: Isolating Re-rendering
hide_table_of_contents: true
---
This example demonstrates how to isolate re-rendering at the component level via the [useFormState](../api-reference/use-form-state) hook.
<iframe src="https://codesandbox.io/embed/intelligent-banach-uqxyx?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Isolating Re-rendering"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/lazy-default-values.md
================================================
---
id: lazy-default-values
title: Lazy Default Values
hide_table_of_contents: true
---
This example demonstrates how to set [defaultValues](../api-reference/use-form#defaultvalues) lazily.
<iframe src="https://codesandbox.io/embed/rcf-lazy-default-values-qxvlz?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Lazy Default Values"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/material-ui.md
================================================
---
id: material-ui
title: Material-UI
hide_table_of_contents: true
---
This example demonstrates the easiest way to integrate [Material-UI](https://material-ui.com) with your form that you have never seen 😎.
<iframe src="https://codesandbox.io/embed/rcf-material-ui-xyi0b?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Material-UI"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/multi-select.md
================================================
---
id: multi-select
title: Multi-select
hide_table_of_contents: true
---
This example demonstrates how to use React Cool Form with a multi-select input. Given the select element a `multiple` attribute. React Cool Form will automatically bind the options into a single array.
<iframe src="https://codesandbox.io/embed/rcf-multi-select-z2q29?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Multi-select"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/radio-group.md
================================================
---
id: radio-group
title: Radio Group
hide_table_of_contents: true
---
This example demonstrates how to use React Cool Form with a radio group.
<iframe src="https://codesandbox.io/embed/rcf-radio-group-xbbvj?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Radio Group"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/react-select.md
================================================
---
id: react-select
title: React Select
hide_table_of_contents: true
---
This example demonstrates how to use React Cool Form's [useControlled](../api-reference/use-controlled) hook to integrate [React Select](https://react-select.com) with your form.
<iframe src="https://codesandbox.io/embed/rcf-react-select-djsl1?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - React Select"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/reset-form.md
================================================
---
id: reset-form
title: Reset Form
hide_table_of_contents: true
---
This example demonstrates how to reset a form in React Cool Form.
<iframe src="https://codesandbox.io/embed/rcf-reset-form-uikxg?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Reset Form"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/validation-with-schema.md
================================================
---
id: validation-with-schema
title: Validation with Schema
hide_table_of_contents: true
---
This example demonstrates how to validate a form with a 3rd-party (e.g. [Yup](https://github.com/jquense/yup) or [Joi](https://github.com/sideway/joi)).
<iframe src="https://codesandbox.io/embed/rcf-schema-lsk6f?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Schema"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/virtualized-lists.md
================================================
---
id: virtualized-lists
title: Virtualized Lists
hide_table_of_contents: true
---
When working with millions of list items, I'd like to recommend using [React Cool Virtual](https://github.com/wellyshen/react-cool-virtual) to virtualized the list for better performance. It works nicely with React Cool Form, let's dive into it.
<iframe src="https://codesandbox.io/embed/rcv-rcf-y6wiq?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCV - RCF"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/without-form-element.md
================================================
---
id: without-form-element
title: Without <form> Element
hide_table_of_contents: true
---
This example demonstrates how to integrate React Cool Form without using a `<form>` element.
<iframe src="https://codesandbox.io/embed/rcf-without-form-element-wvctm?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Without Form Element"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/examples/wizard-form.md
================================================
---
id: wizard-form
title: Wizard Form
hide_table_of_contents: true
---
This example demonstrates how to integrate React Cool Form with [React Router](https://github.com/ReactTraining/react-router) to create a multi-step route-based form (a.k.a wizard form), with validation for each step.
<iframe src="https://codesandbox.io/embed/rcf-wizard-form-cd3qc?fontsize=14&hidenavigation=1&theme=dark"
style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
title="RCF - Wizard Form"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
================================================
FILE: docs/getting-started/3rd-party-ui-libraries.md
================================================
---
id: 3rd-party-ui-libraries
title: 3rd-Party UI Libraries
---
Life is hard but coding can be easier. The reason we ❤️ open-source software (OSS) is because there're many awesome libraries that help us making a better world by software products. React Cool Form bears the faith in mind, it allows us integrate with any 3rd-party UI libraries easily. There're three ways to integrate with an UI library in React Cool Form.
## 1. Seamless Integration
[Uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) or components that rely on native input elements (i.e. [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), and [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)) to work under the hood, we need to do nothing 😂. For example: [Material-UI](https://material-ui.com)'s [TextField](https://material-ui.com/components/text-fields), [Checkbox](https://material-ui.com/components/checkboxes), and [Select](https://material-ui.com/components/selects), etc.
[](https://codesandbox.io/s/rcf-material-ui-xyi0b?fontsize=14&hidenavigation=1&theme=dark)
```js
import { useForm } from "react-cool-form";
import {
FormControl,
FormControlLabel,
FormLabel,
InputLabel,
TextField,
Select,
Checkbox,
Button,
} from "@material-ui/core";
const App = () => {
const { form, use } = useForm({
defaultValues: { username: "", framework: "", fruit: [] },
onSubmit: (values) => console.log("onSubmit: ", values),
});
const errors = use("errors");
return (
<form ref={form} noValidate>
<TextField
label="Username"
name="username"
required
error={!!errors.username}
helperText={errors.username}
/>
<FormControl>
<InputLabel htmlFor="framework">Framework</InputLabel>
{/* When working with select, we need to enable the native select element or you can use the "NativeSelect" instead */}
<Select inputProps={{ id: "framework", name: "framework" }} native>
<option aria-label="None" value="I'm interesting in..." />
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</Select>
</FormControl>
<FormControl component="fieldset"></FormControl>
<div>
<FormLabel component="legend">Fruit</FormLabel>
<FormControlLabel
control={<Checkbox />}
name="fruit"
value="🍎"
label="🍎"
/>
<FormControlLabel
control={<Checkbox />}
name="fruit"
value="🍋"
label="🍋"
/>
<FormControlLabel
control={<Checkbox />}
name="fruit"
value="🥝"
label="🥝"
/>
</div>
<Button type="submit" variant="contained" color="primary">
Submit
</Button>
</form>
);
};
```
## 2. [useControlled Hook](../api-reference/use-controlled)
[Controlled components](https://reactjs.org/docs/forms.html#controlled-components) with highly customized and full features like [React Select](https://react-select.com) or [React Datepicker](https://reactdatepicker.com). We can use React Cool Form's [useControlled](../api-reference/use-controlled) hook to create a reusable controller component for them in a flexible and performant way.
:::note
When using the hook (and not working with [field-array](./arrays-and-lists#dealing-with-array-fields)), a default value is required.
:::
[](https://codesandbox.io/s/rcf-react-select-djsl1?fontsize=14&hidenavigation=1&theme=dark)
```js
import { useForm, useControlled } from "react-cool-form";
import Select from "react-select";
const Field = ({ as, name, ...restProps }) => {
const [fieldProps] = useControlled(name, restProps);
const Component = as;
return <Component {...fieldProps} />;
};
const options = [
{ label: "React", value: "react" },
{ label: "Vue", value: "vue" },
{ label: "Angular", value: "angular" },
{ label: "Svelte", value: "svelte" },
];
const App = () => {
const { form } = useForm({
defaultValues: { framework: "" }, // We must provide a default value for the controlled field
excludeFields: ["#framework"], // Exclude the internal input element of React-Select by ID
onSubmit: (values) => console.log("onSubmit: ", values),
});
return (
<form ref={form}>
<Field
as={Select}
name="framework"
inputId="framework" // Used for excluding the internal input element of React-Select
options={options}
parse={(option) => option.value}
format={(value) => options.find((option) => option.value === value)}
/>
<input type="submit" />
</form>
);
};
```
## 3. Do It Yourself
If the above solutions can't meet your needs then you can set up a custom field with the [API](../api-reference/use-form#methods) of React Cool Form. The following example demonstrates how to combine the [useFormState](../api-reference/use-form-state) and [useFormMethods](../api-reference/use-form-methods) to DIY a custom field with full validation UX.
[](https://codesandbox.io/s/rcf-custom-field-p9lqi?fontsize=14&hidenavigation=1&theme=dark)
```js
import { useForm, useFormState, useFormMethods } from "react-cool-form";
import { TextField, Button } from "@material-ui/core";
const Field = ({ as, name, onChange, onBlur, ...restProps }) => {
const value = useFormState(`values.${name}`);
const { setValue, setTouched } = useFormMethods();
const Component = as;
return (
<Component
name={name}
value={value}
onChange={(e) => {
setValue(name, e.target.value); // Update the field's value and set it as touched
if (onChange) onChange(e);
}}
onBlur={(e) => {
setTouched(name); // Set the field as touched for displaying error (if it's not touched)
if (onBlur) onBlur(e);
}}
{...restProps}
/>
);
};
const App = () => {
const { form, use } = useForm({
defaultValues: { username: "" },
// excludeFields: ["username"], // You can also exclude the field here
validate: ({ username }) => {
const errors = {};
if (!username.length) errors.username = "Required";
return errors;
},
onSubmit: (values) => console.log("onSubmit: ", values),
});
const errors = use("errors");
return (
<form ref={form} noValidate>
<Field
as={TextField}
label="Username"
name="username" // Used for the "excludeFields" option
required
error={!!errors.username}
helperText={errors.username}
inputProps={{ "data-rcf-exclude": true }} // Exclude the field via the pre-defined data attribute
/>
<Button type="submit" variant="contained" color="primary">
Submit
</Button>
</form>
);
};
```
================================================
FILE: docs/getting-started/accessibility.md
================================================
---
id: accessibility
title: Accessibility (a11y)
hide_table_of_contents: true
---
Web accessibility (a.k.a [a11y](https://en.wiktionary.org/wiki/a11y)) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages. React Cool Form is designed to keep your input elements **clean** that helps you build accessible forms by using standard HTML techniques.
- Provide [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) elements to all the form controls, a screen reader will read out the label when the user is focused on the field.
- Use the [aria-invalid](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) to indicate a field has failed validation for the screen reader user.
- Use the [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) to tie an error message with a field, a screen reader will read out the error message when the user is focused on the field.
- Use the [alert role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role) to provide a suggestion to the user for correction on form field errors, a screen reader will read out the alert message when it's added to the document structure.
```js
import { useForm } from "react-cool-form";
const App = () => {
const { form, use } = useForm({
defaultValues: { username: "", email: "", password: "" },
onSubmit: (values) => console.log("onSubmit: ", values),
});
const [errors, isValid] = use(["errors", "isValid"], {
errorWithTouched: true,
});
return (
<>
{!isValid && (
<h2>
<span role="alert">
😭 Please fix the errors before you can submit this form
</span>
</h2>
)}
<form ref={form} noValidate>
<label htmlFor="username">
Username <span>*</span>
</label>
<input
id="username"
name="username"
type="text"
required
aria-invalid={!!errors.username}
aria-describedby="username-hint"
/>
{errors.username && <span id="username-hint">{errors.username}</span>}
<label htmlFor="email">
Email <span>*</span>
</label>
<input
id="email"
name="email"
type="email"
required
aria-invalid={!!errors.email}
aria-describedby="email-hint"
/>
{errors.email && <span id="email-hint">{errors.email}</span>}
<label htmlFor="password">
Password <span>*</span>
</label>
<input
id="password"
name="password"
type="password"
required
minLength={8}
aria-invalid={!!errors.password}
aria-describedby="password-hint"
/>
{errors.password && <span id="password-hint">{errors.password}</span>}
<input type="submit" />
</form>
</>
);
};
```
================================================
FILE: docs/getting-started/arrays-and-lists.md
================================================
---
id: arrays-and-lists
title: Arrays and Lists
---
There can be situations in which the user needs to add or remove fields from a form depends on the amount of fields they need to fill out. Using React Cool Form, we can use the [useFieldArray](../api-reference/use-field-array) hook to easily deal with this situation.
## Dealing with Array Fields
The `useFieldArray` hook helps you to deal with multiple similar fields. You pass it a `name` parameter with the path of the field that holds the relevant array. The hook will then give you the power to render an array of inputs as well as common array/list manipulations.
:::note
The returned `fields` is an array of names. If you need to access the field's data, use the [use](../api-reference/use-form#use) or [getState](../api-reference/use-form#getstate) methods.
:::
[](https://codesandbox.io/s/rcf-arrays-and-lists-crv9d?fontsize=14&hidenavigation=1&theme=dark)
```js
import { useForm, useFieldArray } from "react-cool-form";
const TextField = ({ name, ...restProps }) => {
const [fieldProps] = useControlled(name, restProps);
return <input {...fieldProps} />;
};
const App = () => {
const { form } = useForm({
defaultValues: {
foo: [{ name: "Iron Man" }, { name: "Hulk" }],
},
onSubmit: (values) => console.log("onSubmit: ", values),
});
const [fields, { push, insert, move, swap, remove }] = useFieldArray("foo");
return (
<form ref={form}>
{/* The first parameter of the callback supplies you a field name (e.g. foo[0], foo[1]) */}
{fields.map((fieldName, index) => (
// Use the "fieldName" as the key
<div key={fieldName}>
{/* Use the "fieldName" + "YOUR PATH" as the name */}
<input name={`${fieldName}.name`} />
{/* Working with a controlled component */}
<TextField name={`${fieldName}.name`} />
<button type="button" onClick={() => remove(index)}>
➖
</button>
</div>
))}
<button type="button" onClick={() => push({ name: "Thor" })}>
➕
</button>
<input type="submit" />
</form>
);
};
```
## Applying Focus
When dealing with dynamic list fields we can apply focus to a new field by the [focus](../api-reference/use-form#focus) method to provide better for the user.
:::tip
When working with nested fields, we can just pass in the parent path to the `focus` method. It will apply the focus to the first field.
:::
```js {28,30}
import { useForm, useFieldArray } from "react-cool-form";
const App = () => {
const { form, focus } = useForm({
defaultValues: {
foo: [{ name: "Iron Man", quote: "I'm Iron Man" }],
},
onSubmit: (values) => console.log("onSubmit: ", values),
});
const [fields, { push, remove }] = useFieldArray("foo");
return (
<form ref={form}>
{fields.map((fieldName, index) => (
<div key={fieldName}>
<input name={`${fieldName}.name`} />
<input name={`${fieldName}.quote`} />
<button type="button" onClick={() => remove(index)}>
➖
</button>
</div>
))}
<button
type="button"
onClick={() => {
push({ name: "Thor", quote: "I Knew It" });
// We need to wait for the item rendered (delay = 0 is acceptable) then apply focus to the first field
focus(`foo[${fields.length}]`, 300);
// You can also apply focus to a specified field
focus(`foo[${fields.length}].quote`, 300);
}}
>
➕
</button>
<input type="submit" />
</form>
);
};
```
## Conditional Fields
The `useFieldArray` hook also supports you to work with conditional fields.
```js
import { useState } from "react";
import { useForm, useFieldArray } from "react-cool-form";
const TextField = ({ name, ...restProps }) => {
const [fieldProps] = useControlled(name, restProps);
return <input {...fieldProps} />;
};
const App = () => {
const [toggle, setToggle] = useState(false);
const { form } = useForm({
defaultValues: { foo: [{ name: "Iron Man" }] },
onSubmit: (values) => console.log("onSubmit: ", values),
});
const [fields] = useFieldArray("foo");
return (
<form ref={form}>
{fields.map((fieldName) => (
<div key={fieldName}>
<input name={`${fieldName}.name`} />
{toggle && (
<input
name={`${fieldName}.quote`}
defaultValue="I'm Iron Man" // Provide the default value
/>
)}
<TextField name={`${fieldName}.name`} />
{toggle && (
<TextField
name={`${fieldName}.quote`}
defaultValue="I'm Iron Man" // Provide the default value
/>
)}
</div>
))}
<button type="button" onClick={() => setToggle(!toggle)}>
Toggle
</button>
<input type="submit" />
</form>
);
};
```
## Top-level Field Validation
You can validate the top-level field via the [Form-level Validation](./validation-guide#form-level-validation) or [Field-level Validation](./validation-guide#field-level-validation) (via the `validate` option), depending on your case. React Cool Form runs validation after any array manipulations.
```js {6-12,18-19}
import { useForm, useFieldArray } from "react-cool-form";
const App = () => {
const { form } = useForm({
// Form-level validation
validate: ({ foo }) => {
const errors = {};
if (!foo.length) errors.foo = "We need a super hero!";
return errors;
},
onSubmit: (values) => console.log("onSubmit: ", values),
onError: (errors) => console.log("onError: ", errors),
});
const [fields, { push, remove }] = useFieldArray("foo", {
// Field-level validation
validate: (value, values /* Form values */) =>
!foo.length ? "We need a super hero!" : false,
});
return (
<form ref={form} noValidate>
{fields.map((fieldName, index) => (
<div key={fieldName}>
<input name={`${fieldName}.name`} />
<button type="button" onClick={() => remove(index)}>
➖
</button>
</div>
))}
<button type="button" onClick={() => push({ name: "Thor" })}>
➕
</button>
<input type="submit" />
</form>
);
};
```
================================================
FILE: docs/getting-started/bundle-size-overview.md
================================================
---
id: bundle-size-overview
title: Bundle Size Overview
---
React Cool Form is a tiny size library ([~ 7.1kB](https://bundlephobia.com/result?p=react-cool-form)), it supports [ES modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive) format. With the ES modules, modules bundler (e.g. [webpack](https://webpack.js.org) or [Rollup](https://rollupjs.org/guide)) can automatically remove dead-code through the [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) technique to reduce the bundle size of your app. The size of each module as below:
| Name | Size |
| --------------------------------------------------- | ------- |
| [useForm](../api-reference/use-form) | ~ 5.8kB |
| [useFormMethods](../api-reference/use-form-methods) | ~ 108B |
| [useFormState](../api-reference/use-form-state) | ~ 156B |
| [useControlled](../api-reference/use-controlled) | ~ 645B |
| [useFieldArray](../api-reference/use-field-array) | ~ 729B |
| [get](../api-reference/utility-functions#get) | ~ 4B |
| [set](../api-reference/utility-functions#set) | ~ 6B |
| [unset](../api-reference/utility-functions#unset) | ~ 6B |
================================================
FILE: docs/getting-started/complex-structures.md
================================================
---
id: complex-structures
title: Complex Structures
hide_table_of_contents: true
---
With React Cool Form you can use [dot](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#Dot_notation)-and-[bracket](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#Bracket_notation) notation as the name of a field to create arbitrarily deeply a fields. It's very similar to Lodash's [\_.set](https://lodash.com/docs/4.17.15#set) method.
:::tip
Setting `undefined` as a field value deletes the field data from the structure (see [related doc](../api-reference/use-form#setvalue)).
:::
| Name | Current structure | Value | Result |
| ---------- | ----------------------------------- | --------- | --------------------------- |
| foo | { } | "rcf" | { foo: "rcf" } |
| foo.bar | { } | "rcf" | { foo: { bar: "rcf" } } |
| foo[0] | { } | "rcf" | { foo: [ "rcf" ] } |
| foo[1] | { } | "rcf" | { foo: [ empty, "rcf" ] } |
| foo.0 | { } | "rcf" | { foo: [ "rcf" ] } |
| foo[0].bar | { } | "rcf" | { foo: [ { bar: "rcf" } ] } |
| foo | { foo: "rcf" } | undefined | { } |
| foo.bar | { foo: { bar: "rcf" }, baz: "rcf" } | undefined | { baz: "rcf" } |
| foo[0] | { foo: [ { bar: "rcf" } ] } | undefined | { foo: [ empty ] } |
You can play around with the following example to get better understanding of how it works:
[](https://codesandbox.io/s/rcf-complex-structures-4x4n1?fontsize=14&hidenavigation=1&theme=dark)
```js
import { useForm } from "react-cool-form";
const FieldGroup = ({ name, onUpdate, onClear }) => (
<>
<input name={name} placeholder={name} />
<div>
<button type="button" onClick={onUpdate}>
Update
</button>
<button type="button" onClick={onClear}>
Clear
</button>
</div>
</>
);
const App = () => {
const { form, setValue } = useForm({
defaultValues: {
foo: "",
bar: [],
baz: { a: "" },
qux: [{ a: "" }],
},
onSubmit: (values) => console.log("onSubmit: ", values),
});
return (
<form ref={form}>
<FieldGroup
name="foo"
onUpdate={() => setValue("foo", "rcf")}
onClear={() => setValue("foo")}
/>
<FieldGroup
name="bar[0]"
onUpdate={() => setValue("bar[0]", "🍋")}
onClear={() => setValue("bar[0]")}
/>
<FieldGroup
name="baz.a"
onUpdate={() => setValue("baz.a", "🍉")}
onClear={() => setValue("baz.a")}
/>
<FieldGroup
name="qux[0].a"
onUpdate={() => setValue("qux[0].a", "🥝")}
onClear={() => setValue("qux[0].a")}
/>
<input type="submit" />
</form>
);
};
```
================================================
FILE: docs/getting-started/form-state.md
================================================
---
id: form-state
title: Form State
---
Building highly performant forms is the duty of React Cool Form. It minimizes the number of re-renders and provides the best user experience by the following features:
- No unnecessary re-renders by leveraging th
gitextract_9m26ufpr/
├── .all-contributorsrc
├── .changeset/
│ ├── README.md
│ └── config.json
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── feature_request.md
│ │ └── question.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ └── workflows/
│ ├── codeql-analysis.yml
│ ├── release.yml
│ ├── size.yml
│ └── tests.yml
├── .gitignore
├── .husky/
│ ├── pre-commit
│ └── pre-push
├── .nvmrc
├── .prettierignore
├── .vscode/
│ ├── launch.json
│ └── settings.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── app/
│ ├── .eslintignore
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── .prettierignore
│ ├── .stylelintrc.js
│ ├── README.md
│ ├── package.json
│ ├── public/
│ │ ├── index.html
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src/
│ │ ├── App/
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── Automation/
│ │ │ └── index.tsx
│ │ ├── Playground/
│ │ │ └── index.tsx
│ │ ├── index.tsx
│ │ ├── react-app-env.d.ts
│ │ └── types/
│ │ └── index.d.ts
│ └── tsconfig.json
├── babel.config.json
├── bundlesize.config.json
├── docs/
│ ├── api-reference/
│ │ ├── use-controlled.md
│ │ ├── use-field-array.md
│ │ ├── use-form-methods.md
│ │ ├── use-form-state.md
│ │ ├── use-form.md
│ │ └── utility-functions.md
│ ├── examples/
│ │ ├── arrays-and-lists.md
│ │ ├── basic.md
│ │ ├── built-in-validation.md
│ │ ├── checkboxes.md
│ │ ├── complex-strcutures.md
│ │ ├── conditional-fields.md
│ │ ├── custom-field.md
│ │ ├── field-level-validation.md
│ │ ├── form-level-validation.md
│ │ ├── form-submission.md
│ │ ├── isolating-rerendering.md
│ │ ├── lazy-default-values.md
│ │ ├── material-ui.md
│ │ ├── multi-select.md
│ │ ├── radio-group.md
│ │ ├── react-select.md
│ │ ├── reset-form.md
│ │ ├── validation-with-schema.md
│ │ ├── virtualized-lists.md
│ │ ├── without-form-element.md
│ │ └── wizard-form.md
│ └── getting-started/
│ ├── 3rd-party-ui-libraries.md
│ ├── accessibility.md
│ ├── arrays-and-lists.md
│ ├── bundle-size-overview.md
│ ├── complex-structures.md
│ ├── form-state.md
│ ├── form-submission.md
│ ├── getting-started.md
│ ├── integration-an-existing-form.md
│ ├── reset-form.md
│ ├── typescript-support.md
│ └── validation-guide.md
├── examples/
│ ├── README.md
│ ├── arrays-and-lists/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── basic/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── built-in-validation/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── checkboxes/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── complex-structures/
│ │ ├── .codesandbox/
│ │ │ └── workspace.json
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── conditional-fields/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── custom-field/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── field-level-validation/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── form-level-validation/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── form-submission/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── isolating-rerendering/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── joi/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── lazy-default-values/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── material-ui/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── multi-select/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── quick-start/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── radio-group/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── react-select/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── reset-form/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── showbox/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── typescript/
│ │ ├── index.tsx
│ │ ├── package.json
│ │ └── styles.scss
│ ├── without-form-element/
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ ├── wizard-form/
│ │ ├── .codesandbox/
│ │ │ └── workspace.json
│ │ ├── Step1.js
│ │ ├── Step2.js
│ │ ├── Step3.js
│ │ ├── formValues.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── styles.scss
│ └── yup/
│ ├── index.js
│ ├── package.json
│ └── styles.scss
├── package.json
├── scripts/
│ ├── jest/
│ │ ├── config.js
│ │ └── setup.ts
│ └── rollup/
│ ├── cjsEntryFile.js
│ ├── config.js
│ └── createConfig.js
├── src/
│ ├── hooks/
│ │ ├── index.ts
│ │ ├── useLatest.test.ts
│ │ ├── useLatest.ts
│ │ ├── useState.test.ts
│ │ └── useState.ts
│ ├── index.ts
│ ├── shared.test.ts
│ ├── shared.ts
│ ├── types/
│ │ ├── global.d.ts
│ │ ├── index.ts
│ │ └── react-cool-form.d.ts
│ ├── useControlled.test.tsx
│ ├── useControlled.ts
│ ├── useFieldArray.test.tsx
│ ├── useFieldArray.ts
│ ├── useForm.test.tsx
│ ├── useForm.ts
│ ├── useFormMethods.test.tsx
│ ├── useFormMethods.ts
│ ├── useFormState.test.tsx
│ ├── useFormState.ts
│ └── utils/
│ ├── arrayToMap.test.ts
│ ├── arrayToMap.ts
│ ├── cloneObject.test.ts
│ ├── cloneObject.ts
│ ├── compact.test.ts
│ ├── compact.ts
│ ├── deepMerge.test.ts
│ ├── deepMerge.ts
│ ├── filterErrors.test.ts
│ ├── filterErrors.ts
│ ├── get.test.ts
│ ├── get.ts
│ ├── getIsDirty.test.ts
│ ├── getIsDirty.ts
│ ├── getPath.test.ts
│ ├── getPath.ts
│ ├── index.ts
│ ├── invariant.test.ts
│ ├── invariant.ts
│ ├── isAsyncFunction.test.ts
│ ├── isAsyncFunction.ts
│ ├── isCheckboxInput.test.ts
│ ├── isCheckboxInput.ts
│ ├── isEmptyObject.test.ts
│ ├── isEmptyObject.ts
│ ├── isFieldArray.test.ts
│ ├── isFieldArray.ts
│ ├── isFieldElement.test.ts
│ ├── isFieldElement.ts
│ ├── isFileInput.test.ts
│ ├── isFileInput.ts
│ ├── isFileList.ts
│ ├── isFunction.test.ts
│ ├── isFunction.ts
│ ├── isInputElement.test.ts
│ ├── isInputElement.ts
│ ├── isNumberInput.test.ts
│ ├── isNumberInput.ts
│ ├── isObject.test.ts
│ ├── isObject.ts
│ ├── isPlainObject.test.ts
│ ├── isPlainObject.ts
│ ├── isRadioInput.test.ts
│ ├── isRadioInput.ts
│ ├── isRangeInput.test.ts
│ ├── isRangeInput.ts
│ ├── isSelectMultiple.test.ts
│ ├── isSelectMultiple.ts
│ ├── isSelectOne.test.ts
│ ├── isSelectOne.ts
│ ├── isUndefined.test.ts
│ ├── isUndefined.ts
│ ├── parseState.test.ts
│ ├── parseState.ts
│ ├── runWithLowPriority.test.ts
│ ├── runWithLowPriority.ts
│ ├── set.test.ts
│ ├── set.ts
│ ├── setValuesAsTrue.test.ts
│ ├── setValuesAsTrue.ts
│ ├── stringToPath.test.ts
│ ├── stringToPath.ts
│ ├── unset.test.ts
│ ├── unset.ts
│ ├── warn.test.ts
│ └── warn.ts
├── tsconfig.json
└── website/
├── .gitignore
├── .prettierignore
├── README.md
├── babel.config.js
├── docusaurus.config.js
├── package.json
├── sidebars.js
├── src/
│ ├── css/
│ │ └── custom.scss
│ └── pages/
│ ├── index.js
│ └── styles.module.scss
└── static/
└── .nojekyll
SYMBOL INDEX (158 symbols across 32 files)
FILE: examples/arrays-and-lists/index.js
function App (line 8) | function App() {
FILE: examples/basic/index.js
function App (line 29) | function App() {
FILE: examples/built-in-validation/index.js
function App (line 6) | function App() {
FILE: examples/checkboxes/index.js
function App (line 23) | function App() {
FILE: examples/complex-structures/index.js
function App (line 20) | function App() {
FILE: examples/conditional-fields/index.js
function App (line 31) | function App() {
FILE: examples/custom-field/index.js
function App (line 29) | function App() {
FILE: examples/field-level-validation/index.js
function App (line 28) | function App() {
FILE: examples/form-level-validation/index.js
function App (line 30) | function App() {
FILE: examples/form-submission/index.js
function App (line 13) | function App() {
FILE: examples/isolating-rerendering/index.js
function App (line 24) | function App() {
FILE: examples/joi/index.js
function App (line 26) | function App() {
FILE: examples/lazy-default-values/index.js
function App (line 14) | function App() {
FILE: examples/material-ui/index.js
function App (line 19) | function App() {
FILE: examples/multi-select/index.js
function App (line 6) | function App() {
FILE: examples/quick-start/index.js
function App (line 14) | function App() {
FILE: examples/radio-group/index.js
function App (line 13) | function App() {
FILE: examples/react-select/index.js
function App (line 21) | function App() {
FILE: examples/reset-form/index.js
function App (line 13) | function App() {
FILE: examples/showbox/index.js
function App (line 8) | function App() {
FILE: examples/typescript/index.tsx
type FormValues (line 6) | interface FormValues {
function App (line 11) | function App() {
FILE: examples/without-form-element/index.js
function App (line 14) | function App() {
FILE: examples/yup/index.js
function App (line 47) | function App() {
FILE: src/types/global.d.ts
type Window (line 3) | interface Window {
FILE: src/types/index.ts
type ObjMap (line 9) | type ObjMap<T = boolean> = Record<string, T>;
type DeepProps (line 11) | type DeepProps<V, T = any> = {
type Methods (line 16) | type Methods<V = any> = {
type FormErrors (line 35) | type FormErrors<V> = DeepProps<V>;
type FormState (line 37) | interface FormState<V = any> {
type SetStateRef (line 50) | interface SetStateRef {
type Observer (line 62) | interface Observer<V> {
type FormStateReturn (line 67) | interface FormStateReturn<V> {
type FormValues (line 74) | type FormValues = ObjMap<any>;
type Handlers (line 76) | type Handlers = {
type FieldElement (line 80) | type FieldElement =
type Fields (line 85) | type Fields = Map<
type Parsers (line 93) | type Parsers = ObjMap<Omit<FieldOptions, "validate">>;
type FieldArray (line 95) | type FieldArray = ObjMap<{ fields: ObjMap; reset: () => void }>;
type EventOptions (line 97) | interface EventOptions<V> {
type FieldNamesLike (line 111) | type FieldNamesLike =
type ResetHandler (line 116) | interface ResetHandler<V> {
type SubmitHandler (line 120) | interface SubmitHandler<V = any> {
type ErrorHandler (line 128) | interface ErrorHandler<V = any> {
type OnStateChange (line 136) | interface OnStateChange<V> {
type FormValidator (line 140) | interface FormValidator<V> {
type RegisterForm (line 148) | type RegisterForm = RefCallback<HTMLElement>;
type FieldValidator (line 150) | interface FieldValidator<V> {
type FieldParser (line 154) | interface FieldParser {
type FieldOptions (line 158) | interface FieldOptions<V = any> {
type RegisterField (line 165) | interface RegisterField<V = any> {
type HandleChangeEvent (line 171) | interface HandleChangeEvent {
type SetDefaultValue (line 175) | interface SetDefaultValue {
type SetNodesOrValues (line 179) | interface SetNodesOrValues<V> {
type SetTouchedMaybeValidate (line 183) | interface SetTouchedMaybeValidate {
type ShouldRemoveField (line 187) | interface ShouldRemoveField {
type GetNodeValue (line 191) | interface GetNodeValue {
type Path (line 195) | type Path = string | string[] | ObjMap<string>;
type GetFormState (line 197) | interface GetFormState<V> {
type Focus (line 209) | interface Focus {
type RemoveField (line 213) | interface RemoveField {
type Use (line 220) | interface Use<V> {
type GetState (line 227) | interface GetState {
type SetValue (line 231) | interface SetValue {
type SetTouched (line 241) | interface SetTouched {
type SetDirty (line 249) | interface SetDirty {
type SetError (line 253) | interface SetError {
type ClearErrors (line 257) | interface ClearErrors {
type RunValidation (line 261) | interface RunValidation {
type Reset (line 268) | interface Reset<V = any> {
type Submit (line 276) | interface Submit<V> {
type FormConfig (line 283) | type FormConfig<V = any> = Partial<{
type FormMethods (line 299) | interface FormMethods<V = any> {
type FormStateConfig (line 317) | type FormStateConfig<V = any> = Partial<{
type FormStateCallback (line 323) | interface FormStateCallback {
type ControlledParser (line 328) | interface ControlledParser {
type ControlledFormatter (line 332) | interface ControlledFormatter {
type ControlledConfig (line 336) | type ControlledConfig<V = any> = Partial<{
type FieldProps (line 346) | interface FieldProps {
type Meta (line 354) | interface Meta {
type ControlledReturn (line 360) | type ControlledReturn = [FieldProps, Meta];
type Keys (line 363) | type Keys = "values" | "touched" | "errors" | "dirty";
type StateHandler (line 365) | interface StateHandler {
type HelperOptions (line 369) | type HelperOptions = Partial<{
type Push (line 374) | interface Push<T = any> {
type Insert (line 378) | interface Insert<T = any> {
type Remove (line 382) | interface Remove<T = any> {
type Swap (line 386) | interface Swap {
type Move (line 390) | interface Move {
type FieldArrayConfig (line 394) | type FieldArrayConfig<T = any, V = any> = Partial<{
type FieldArrayReturn (line 400) | type FieldArrayReturn<T> = [
FILE: src/types/react-cool-form.d.ts
type ObjMap (line 5) | type ObjMap<T = boolean> = Record<string, T>;
type DeepProps (line 7) | type DeepProps<V, T = any> = {
type FormValues (line 12) | type FormValues = ObjMap<any>;
type EventOptions (line 14) | interface EventOptions<V extends FormValues = FormValues> {
type FormErrors (line 28) | type FormErrors<E extends FormValues = FormValues> = DeepProps<E>;
type FormState (line 30) | type FormState<V extends FormValues = FormValues> = Readonly<{
type PreviousValuesFn (line 43) | interface PreviousValuesFn<V extends FormValues = FormValues> {
type PreviousValueFn (line 47) | interface PreviousValueFn {
type PreviousErrorFn (line 51) | interface PreviousErrorFn {
type FormValidator (line 55) | interface FormValidator<V extends FormValues = FormValues> {
type FieldValidator (line 63) | interface FieldValidator<V extends FormValues = FormValues> {
type FieldParser (line 67) | interface FieldParser<V = any, R = any> {
type FieldNamesFn (line 71) | interface FieldNamesFn<N extends string[] = string[]> {
type ResetHandler (line 75) | interface ResetHandler<V extends FormValues = FormValues> {
type SubmitHandler (line 79) | interface SubmitHandler<V extends FormValues = FormValues> {
type ErrorHandler (line 87) | interface ErrorHandler<V extends FormValues = FormValues> {
type OnStateChange (line 95) | interface OnStateChange<V extends FormValues = FormValues> {
type RegisterForm (line 99) | type RegisterForm = RefCallback<HTMLElement>;
type RegisterFieldReturn (line 101) | interface RegisterFieldReturn {
type FieldOptions (line 107) | interface FieldOptions<V extends FormValues = FormValues> {
type RegisterField (line 114) | interface RegisterField<V extends FormValues = FormValues> {
type Focus (line 119) | interface Focus {
type RemoveField (line 123) | interface RemoveField {
type UseOptions (line 130) | interface UseOptions<V extends FormValues = FormValues> {
type Use (line 135) | interface Use<V extends FormValues = FormValues> {
type GetState (line 139) | interface GetState {
type SetValueOptions (line 143) | type SetValueOptions = {
type SetValue (line 147) | interface SetValue {
type SetTouchedOptions (line 155) | type SetTouchedOptions = {
type SetTouched (line 159) | interface SetTouched {
type SetDirty (line 163) | interface SetDirty {
type SetError (line 167) | interface SetError {
type ClearErrors (line 171) | interface ClearErrors {
type RunValidationOptions (line 175) | type RunValidationOptions = {
type RunValidation (line 179) | interface RunValidation {
type Reset (line 186) | interface Reset<V extends FormValues = FormValues> {
type Submit (line 194) | interface Submit<V extends FormValues = FormValues> {
type FormConfig (line 201) | type FormConfig<V extends FormValues = FormValues> = Partial<{
type FormMethods (line 217) | interface FormMethods<V extends FormValues = FormValues> {
type Path (line 244) | type Path = string | string[] | ObjMap<string>;
type FormStateConfig (line 246) | type FormStateConfig<V> = Partial<{
type FormStateCallback (line 252) | interface FormStateCallback {
type ControlledParser (line 269) | interface ControlledParser<E extends any[] = any[], R = any> {
type ControlledFormatter (line 273) | interface ControlledFormatter<V = any, R = any> {
type ControlledConfig (line 277) | type ControlledConfig<V extends FormValues = FormValues> = Partial<{
type ControlledReturn (line 287) | type ControlledReturn = [
type HelperOptions (line 304) | type HelperOptions = Partial<{
type Push (line 309) | interface Push<T = any> {
type Insert (line 313) | interface Insert<T = any> {
type Remove (line 317) | interface Remove<T = any> {
type Swap (line 321) | interface Swap {
type Move (line 325) | interface Move {
type FieldArrayConfig (line 329) | type FieldArrayConfig<
type FieldArrayReturn (line 338) | type FieldArrayReturn<T = any> = [
FILE: src/useControlled.test.tsx
type API (line 19) | type API = Omit<FormMethods, "form"> & {
type Props (line 24) | interface Props extends FormConfig {
FILE: src/useFieldArray.test.tsx
type API (line 26) | type API = Omit<FormMethods, "form"> & {
type Config (line 37) | interface Config extends FieldArrayConfig {
type Props (line 48) | type Props = Partial<Config>;
FILE: src/useForm.test.tsx
type Children (line 20) | type Children = JSX.Element | JSX.Element[] | null;
type API (line 22) | type API = Omit<FormMethods, "form"> & {
type Config (line 27) | interface Config extends FormConfig {
type Props (line 37) | type Props = Partial<Config>;
FILE: src/useFormMethods.test.tsx
type Props (line 7) | interface Props {
FILE: src/useFormState.test.tsx
type Props (line 11) | interface Props extends FormStateConfig {
FILE: website/src/pages/index.js
function Feature (line 99) | function Feature({ imageUrl, title, description }) {
function Home (line 114) | function Home() {
Condensed preview — 271 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (607K chars).
[
{
"path": ".all-contributorsrc",
"chars": 813,
"preview": "{\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"commit\": false,\n \"contributors\": [\n {\n \"login\": \"wel"
},
{
"path": ".changeset/README.md",
"chars": 512,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 316,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@1.7.0/schema.json\",\n \"changelog\": [\n \"@changesets/changelog-git"
},
{
"path": ".eslintignore",
"chars": 40,
"preview": "dist\nscripts/rollup\napp\nexamples\nwebsite"
},
{
"path": ".eslintrc.js",
"chars": 638,
"preview": "module.exports = {\n extends: [\"welly\"],\n rules: {\n eqeqeq: \"off\",\n camelcase: \"off\",\n \"no-shadow\": \"off\",\n "
},
{
"path": ".github/FUNDING.yml",
"chars": 678,
"preview": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [u"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 773,
"preview": "---\nname: \"\\U0001F41B Bug Report\"\nabout: Create a report to help us improve\ntitle: \"\"\nlabels: \"\"\nassignees: \"\"\n---\n\n# Bu"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 548,
"preview": "---\nname: \"\\U0001F4A1 Feature Request\"\nabout: Suggest an idea for this project\ntitle: \"\"\nlabels: \"\"\nassignees: \"\"\n---\n\n#"
},
{
"path": ".github/ISSUE_TEMPLATE/question.md",
"chars": 945,
"preview": "---\nname: \"\\U0001F914 Questions and Help\"\nabout: This issue tracker is not for questions. Please ask questions at https:"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 1344,
"preview": "<!--\n Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!\n\n Before submitting a pul"
},
{
"path": ".github/dependabot.yml",
"chars": 743,
"preview": "version: 2\nupdates:\n - package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: daily\n time: \"21:00"
},
{
"path": ".github/workflows/codeql-analysis.yml",
"chars": 1941,
"preview": "name: \"CodeQL\"\n\non:\n push:\n branches: [master]\n pull_request:\n branches: [master]\n schedule:\n # ┌────"
},
{
"path": ".github/workflows/release.yml",
"chars": 757,
"preview": "name: Release\n\non:\n push:\n branches:\n - master\n\njobs:\n release:\n name: Release\n runs-on: ubuntu-latest\n "
},
{
"path": ".github/workflows/size.yml",
"chars": 283,
"preview": "name: Compressed Size\n\non: [pull_request]\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/c"
},
{
"path": ".github/workflows/tests.yml",
"chars": 1212,
"preview": "name: Lint / Test / Size\n\non:\n push:\n branches:\n - master\n tags-ignore:\n - \"**\"\n pull_request:\n bra"
},
{
"path": ".gitignore",
"chars": 110,
"preview": "# dependencies\nnode_modules\n\n# testing\ncoverage\n\n# production\ndist\n\n# misc\n.size-snapshot.json\n.DS_Store\n*.log"
},
{
"path": ".husky/pre-commit",
"chars": 59,
"preview": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nyarn lint-staged\n"
},
{
"path": ".husky/pre-push",
"chars": 62,
"preview": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nyarn test\nyarn size\n"
},
{
"path": ".nvmrc",
"chars": 6,
"preview": "lts/*\n"
},
{
"path": ".prettierignore",
"chars": 61,
"preview": "dist\ncoverage\napp\nexamples\nwebsite\n\n*.log\n.size-snapshot.json"
},
{
"path": ".vscode/launch.json",
"chars": 435,
"preview": "{\n // Use IntelliSense to learn about possible attributes.\n // Hover to view descriptions of existing attributes.\n //"
},
{
"path": ".vscode/settings.json",
"chars": 55,
"preview": "{\n \"typescript.tsdk\": \"node_modules/typescript/lib\"\n}\n"
},
{
"path": "CHANGELOG.md",
"chars": 81860,
"preview": "# react-cool-form\n\n## 0.4.1\n\n### Patch Changes\n\n- [#697](https://github.com/wellyshen/react-cool-form/pull/697) [`87eb83"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 5469,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participa"
},
{
"path": "CONTRIBUTING.md",
"chars": 3707,
"preview": "# Contributing to React Cool Form\n\nWhen contributing to this repository, please first discuss the change you wish to mak"
},
{
"path": "LICENSE",
"chars": 1077,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2021 Welly Shen\n\nPermission is hereby granted, free of charge, to any person obtain"
},
{
"path": "README.md",
"chars": 7186,
"preview": "> ⚠️ Thank you for supporting me, this library isn't maintained anymore. Please consider other libraries.\n\n<p align=\"cen"
},
{
"path": "SECURITY.md",
"chars": 619,
"preview": "# Security Policy\n\n## Supported Versions\n\nUse this section to tell people about which versions of your project are\ncurre"
},
{
"path": "app/.eslintignore",
"chars": 5,
"preview": "build"
},
{
"path": "app/.eslintrc.js",
"chars": 105,
"preview": "module.exports = {\n extends: [\"react-app\", \"welly\"],\n rules: { \"react/react-in-jsx-scope\": \"off\" },\n};\n"
},
{
"path": "app/.gitignore",
"chars": 319,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n.pnp\n"
},
{
"path": "app/.prettierignore",
"chars": 167,
"preview": "# testing\ncoverage\n\n# production\nbuild\n\n# misc\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n"
},
{
"path": "app/.stylelintrc.js",
"chars": 128,
"preview": "module.exports = {\n extends: [\"stylelint-config-standard\", \"stylelint-config-prettier\"],\n ignoreFiles: [\"build/**/*.cs"
},
{
"path": "app/README.md",
"chars": 51,
"preview": "# App\n\n🧪 A place for trying something interesting.\n"
},
{
"path": "app/package.json",
"chars": 1389,
"preview": "{\n \"name\": \"rcf-app\",\n \"private\": true,\n \"scripts\": {\n \"link-pkg\": \"yarn link 'react-cool-form'\",\n \"start:auto\""
},
{
"path": "app/public/index.html",
"chars": 1872,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.i"
},
{
"path": "app/public/manifest.json",
"chars": 488,
"preview": "{\n \"short_name\": \"REACT COOL IMG\",\n \"name\": \"REACT COOL IMG\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"si"
},
{
"path": "app/public/robots.txt",
"chars": 67,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "app/src/App/index.tsx",
"chars": 410,
"preview": "import { Global, css } from \"@emotion/react\";\nimport normalize from \"normalize.css\";\n\nimport Playground from \"../Playgro"
},
{
"path": "app/src/App/styles.ts",
"chars": 176,
"preview": "import { css } from \"@emotion/react\";\n\n// eslint-disable-next-line import/prefer-default-export\nexport const root = css`"
},
{
"path": "app/src/Automation/index.tsx",
"chars": 87,
"preview": "const Automation = (): JSX.Element => <h1>Automation</h1>;\n\nexport default Automation;\n"
},
{
"path": "app/src/Playground/index.tsx",
"chars": 524,
"preview": "/* eslint-disable no-console */\n\nimport { useForm } from \"react-cool-form\";\n\nexport default () => {\n const { form, runV"
},
{
"path": "app/src/index.tsx",
"chars": 195,
"preview": "import { StrictMode } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nReactDOM.render(\n <Str"
},
{
"path": "app/src/react-app-env.d.ts",
"chars": 96,
"preview": "/// <reference types=\"react-scripts\" />\n/// <reference types=\"@emotion/react/types/css-prop\" />\n"
},
{
"path": "app/src/types/index.d.ts",
"chars": 24,
"preview": "declare module \"*.css\";\n"
},
{
"path": "app/tsconfig.json",
"chars": 503,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
},
{
"path": "babel.config.json",
"chars": 274,
"preview": "{\n \"presets\": [\n [\n \"@babel/env\",\n {\n \"loose\": true,\n \"exclude\": [\n \"@babel/plugin-"
},
{
"path": "bundlesize.config.json",
"chars": 109,
"preview": "{\n \"files\": [\n {\n \"path\": \"dist/index.umd.production.min.js\",\n \"maxSize\": \"7.2 kB\"\n }\n ]\n}\n"
},
{
"path": "docs/api-reference/use-controlled.md",
"chars": 3948,
"preview": "---\nid: use-controlled\ntitle: useControlled\n---\n\nThis hook allows us to integrate with an existing component (usually a "
},
{
"path": "docs/api-reference/use-field-array.md",
"chars": 3517,
"preview": "---\nid: use-field-array\ntitle: useFieldArray\n---\n\nThis hook supplies you with functions for manipulating the array/list "
},
{
"path": "docs/api-reference/use-form-methods.md",
"chars": 1007,
"preview": "---\nid: use-form-methods\ntitle: useFormMethods\n---\n\nThis hook allows us to use [all of the methods](./use-form#methods) "
},
{
"path": "docs/api-reference/use-form-state.md",
"chars": 3693,
"preview": "---\nid: use-form-state\ntitle: useFormState\n---\n\nThis hook can be used for two purposes:\n\n- Isolating re-rendering: It he"
},
{
"path": "docs/api-reference/use-form.md",
"chars": 18411,
"preview": "---\nid: use-form\ntitle: useForm\n---\n\nThis is a custom React [hook](https://reactjs.org/docs/hooks-custom.html#using-a-cu"
},
{
"path": "docs/api-reference/utility-functions.md",
"chars": 2205,
"preview": "---\nid: utility-functions\ntitle: Utility Functions\n---\n\nReact Cool Form exports useful utility functions that can help y"
},
{
"path": "docs/examples/arrays-and-lists.md",
"chars": 672,
"preview": "---\nid: arrays-and-lists\ntitle: Arrays and Lists\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to work"
},
{
"path": "docs/examples/basic.md",
"chars": 669,
"preview": "---\nid: basic\ntitle: Basic\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to use form inputs (input, se"
},
{
"path": "docs/examples/built-in-validation.md",
"chars": 789,
"preview": "---\nid: built-in-validation\ntitle: Built-in Validation\nhide_table_of_contents: true\n---\n\nThis example demonstrates how t"
},
{
"path": "docs/examples/checkboxes.md",
"chars": 804,
"preview": "---\nid: checkboxes\ntitle: Checkboxes\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to use React Cool F"
},
{
"path": "docs/examples/complex-strcutures.md",
"chars": 724,
"preview": "---\nid: complex-structures\ntitle: Complex Structures\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to "
},
{
"path": "docs/examples/conditional-fields.md",
"chars": 1023,
"preview": "---\nid: conditional-fields\ntitle: Conditional Fields\nhide_table_of_contents: true\n---\n\nBy default, when a form input ele"
},
{
"path": "docs/examples/custom-field.md",
"chars": 752,
"preview": "---\nid: custom-field\ntitle: Custom Field\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to combine the "
},
{
"path": "docs/examples/field-level-validation.md",
"chars": 744,
"preview": "---\nid: field-level-validation\ntitle: Field-level Validation\nhide_table_of_contents: true\n---\n\nThis example demonstrates"
},
{
"path": "docs/examples/form-level-validation.md",
"chars": 746,
"preview": "---\nid: form-level-validation\ntitle: Form-level Validation\nhide_table_of_contents: true\n---\n\nThis example demonstrates h"
},
{
"path": "docs/examples/form-submission.md",
"chars": 659,
"preview": "---\nid: form-submission\ntitle: Form Submission\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to submit"
},
{
"path": "docs/examples/isolating-rerendering.md",
"chars": 750,
"preview": "---\nid: isolating-rerendering\ntitle: Isolating Re-rendering\nhide_table_of_contents: true\n---\n\nThis example demonstrates "
},
{
"path": "docs/examples/lazy-default-values.md",
"chars": 710,
"preview": "---\nid: lazy-default-values\ntitle: Lazy Default Values\nhide_table_of_contents: true\n---\n\nThis example demonstrates how t"
},
{
"path": "docs/examples/material-ui.md",
"chars": 713,
"preview": "---\nid: material-ui\ntitle: Material-UI\nhide_table_of_contents: true\n---\n\nThis example demonstrates the easiest way to in"
},
{
"path": "docs/examples/multi-select.md",
"chars": 782,
"preview": "---\nid: multi-select\ntitle: Multi-select\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to use React Co"
},
{
"path": "docs/examples/radio-group.md",
"chars": 649,
"preview": "---\nid: radio-group\ntitle: Radio Group\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to use React Cool"
},
{
"path": "docs/examples/react-select.md",
"chars": 759,
"preview": "---\nid: react-select\ntitle: React Select\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to use React Co"
},
{
"path": "docs/examples/reset-form.md",
"chars": 638,
"preview": "---\nid: reset-form\ntitle: Reset Form\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to reset a form in "
},
{
"path": "docs/examples/validation-with-schema.md",
"chars": 741,
"preview": "---\nid: validation-with-schema\ntitle: Validation with Schema\nhide_table_of_contents: true\n---\n\nThis example demonstrates"
},
{
"path": "docs/examples/virtualized-lists.md",
"chars": 818,
"preview": "---\nid: virtualized-lists\ntitle: Virtualized Lists\nhide_table_of_contents: true\n---\n\nWhen working with millions of list "
},
{
"path": "docs/examples/without-form-element.md",
"chars": 707,
"preview": "---\nid: without-form-element\ntitle: Without <form> Element\nhide_table_of_contents: true\n---\n\nThis example demonstrates h"
},
{
"path": "docs/examples/wizard-form.md",
"chars": 794,
"preview": "---\nid: wizard-form\ntitle: Wizard Form\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to integrate Reac"
},
{
"path": "docs/getting-started/3rd-party-ui-libraries.md",
"chars": 7268,
"preview": "---\nid: 3rd-party-ui-libraries\ntitle: 3rd-Party UI Libraries\n---\n\nLife is hard but coding can be easier. The reason we ❤"
},
{
"path": "docs/getting-started/accessibility.md",
"chars": 3147,
"preview": "---\nid: accessibility\ntitle: Accessibility (a11y)\nhide_table_of_contents: true\n---\n\nWeb accessibility (a.k.a [a11y](http"
},
{
"path": "docs/getting-started/arrays-and-lists.md",
"chars": 6437,
"preview": "---\nid: arrays-and-lists\ntitle: Arrays and Lists\n---\n\nThere can be situations in which the user needs to add or remove f"
},
{
"path": "docs/getting-started/bundle-size-overview.md",
"chars": 1252,
"preview": "---\nid: bundle-size-overview\ntitle: Bundle Size Overview\n---\n\nReact Cool Form is a tiny size library ([~ 7.1kB](https://"
},
{
"path": "docs/getting-started/complex-structures.md",
"chars": 3211,
"preview": "---\nid: complex-structures\ntitle: Complex Structures\nhide_table_of_contents: true\n---\n\nWith React Cool Form you can use "
},
{
"path": "docs/getting-started/form-state.md",
"chars": 11383,
"preview": "---\nid: form-state\ntitle: Form State\n---\n\nBuilding highly performant forms is the duty of React Cool Form. It minimizes "
},
{
"path": "docs/getting-started/form-submission.md",
"chars": 3858,
"preview": "---\nid: form-submission\ntitle: Form Submission\n---\n\nIt's dead simple to submit a form in React Cool Form. All we need to"
},
{
"path": "docs/getting-started/getting-started.md",
"chars": 4008,
"preview": "---\nid: getting-started\ntitle: Getting Started\nslug: /\n---\n\nBuilding forms in [React](https://reactjs.org) might be a ch"
},
{
"path": "docs/getting-started/integration-an-existing-form.md",
"chars": 5567,
"preview": "---\nid: integration-an-existing-form\ntitle: Integration an Existing Form\n---\n\n\"Easy to use\" is one of the core design pr"
},
{
"path": "docs/getting-started/reset-form.md",
"chars": 3509,
"preview": "---\nid: reset-form\ntitle: Reset Form\n---\n\nThere're two common ways to reset all form data: [reset after form submission]"
},
{
"path": "docs/getting-started/typescript-support.md",
"chars": 2470,
"preview": "---\nid: typescript-support\ntitle: TypeScript Support\n---\n\nReact Cool Form is written in [TypeScript](https://www.typescr"
},
{
"path": "docs/getting-started/validation-guide.md",
"chars": 16123,
"preview": "---\nid: validation-guide\ntitle: Validation Guide\n---\n\nReact Cool Form supports a wide range of **synchronous** and **asy"
},
{
"path": "examples/README.md",
"chars": 124,
"preview": "# Examples\n\n📚 A collection of code examples, let's [check it out](https://react-cool-form.netlify.app/docs/examples/basi"
},
{
"path": "examples/arrays-and-lists/index.js",
"chars": 2324,
"preview": "import { render } from \"react-dom\";\nimport { useForm, useFieldArray } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\n"
},
{
"path": "examples/arrays-and-lists/package.json",
"chars": 459,
"preview": "{\n \"name\": \"rcf-arrays-and-lists\",\n \"description\": \"The arrays and lists example of RCF.\",\n \"main\": \"index.js\",\n \"de"
},
{
"path": "examples/arrays-and-lists/styles.scss",
"chars": 1113,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 3rem auto 0;\n width: 28rem;\n\n div {\n d"
},
{
"path": "examples/basic/index.js",
"chars": 1414,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst Field = ("
},
{
"path": "examples/basic/package.json",
"chars": 437,
"preview": "{\n \"name\": \"rcf-basic\",\n \"description\": \"The basic example of RCF.\",\n \"main\": \"index.js\",\n \"dependencies\": {\n \"re"
},
{
"path": "examples/basic/styles.scss",
"chars": 576,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 3rem auto 0;\n width: 24rem;\n\n div {\n w"
},
{
"path": "examples/built-in-validation/index.js",
"chars": 768,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nfunction App() "
},
{
"path": "examples/built-in-validation/package.json",
"chars": 465,
"preview": "{\n \"name\": \"rcf-built-in-validation\",\n \"description\": \"The built-in validation example of RCF.\",\n \"main\": \"index.js\","
},
{
"path": "examples/built-in-validation/styles.scss",
"chars": 415,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n input {\n "
},
{
"path": "examples/checkboxes/index.js",
"chars": 1448,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst Field = ("
},
{
"path": "examples/checkboxes/package.json",
"chars": 447,
"preview": "{\n \"name\": \"rcf-checkboxes\",\n \"description\": \"The checkboxes example of RCF.\",\n \"main\": \"index.js\",\n \"dependencies\":"
},
{
"path": "examples/checkboxes/styles.scss",
"chars": 598,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n color: #fff;"
},
{
"path": "examples/complex-structures/.codesandbox/workspace.json",
"chars": 217,
"preview": "{\n \"responsive-preview\": {\n \"Mobile\": [\n 320,\n 675\n ],\n \"Tablet\": [\n 1024,\n 765\n ],\n "
},
{
"path": "examples/complex-structures/index.js",
"chars": 1323,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst FieldGrou"
},
{
"path": "examples/complex-structures/package.json",
"chars": 463,
"preview": "{\n \"name\": \"rcf-complex-structures\",\n \"description\": \"The complex structures example of RCF.\",\n \"main\": \"index.js\",\n "
},
{
"path": "examples/complex-structures/styles.scss",
"chars": 658,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 3rem auto 0;\n width: 24rem;\n\n input,\n bu"
},
{
"path": "examples/conditional-fields/index.js",
"chars": 2830,
"preview": "import { useState } from \"react\";\nimport { render } from \"react-dom\";\nimport { useForm, useControlled, useFieldArray } f"
},
{
"path": "examples/conditional-fields/package.json",
"chars": 463,
"preview": "{\n \"name\": \"rcf-conditional-fields\",\n \"description\": \"The conditional fields example of RCF.\",\n \"main\": \"index.js\",\n "
},
{
"path": "examples/conditional-fields/styles.scss",
"chars": 703,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n input:not(["
},
{
"path": "examples/custom-field/index.js",
"chars": 1756,
"preview": "import { render } from \"react-dom\";\nimport { useForm, useFormState, useFormMethods } from \"react-cool-form\";\nimport { Te"
},
{
"path": "examples/custom-field/package.json",
"chars": 487,
"preview": "{\n \"name\": \"rcf-custom-field\",\n \"description\": \"The custom field example of RCF.\",\n \"main\": \"index.js\",\n \"dependenci"
},
{
"path": "examples/custom-field/styles.scss",
"chars": 302,
"preview": "body {\n font-family: sans-serif;\n background: #fff;\n}\n\nform {\n margin: 3rem auto 0;\n width: 24rem;\n\n .MuiFormContro"
},
{
"path": "examples/field-level-validation/index.js",
"chars": 1314,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst validateO"
},
{
"path": "examples/field-level-validation/package.json",
"chars": 471,
"preview": "{\n \"name\": \"rcf-field-level-validation\",\n \"description\": \"The field-level validation example of RCF.\",\n \"main\": \"inde"
},
{
"path": "examples/field-level-validation/styles.scss",
"chars": 415,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n input {\n "
},
{
"path": "examples/form-level-validation/index.js",
"chars": 1255,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst validateO"
},
{
"path": "examples/form-level-validation/package.json",
"chars": 469,
"preview": "{\n \"name\": \"rcf-form-level-validation\",\n \"description\": \"The form-level validation example of RCF.\",\n \"main\": \"index."
},
{
"path": "examples/form-level-validation/styles.scss",
"chars": 415,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n input {\n "
},
{
"path": "examples/form-submission/index.js",
"chars": 823,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst submitHan"
},
{
"path": "examples/form-submission/package.json",
"chars": 457,
"preview": "{\n \"name\": \"rcf-form-submission\",\n \"description\": \"The form submission example of RCF.\",\n \"main\": \"index.js\",\n \"depe"
},
{
"path": "examples/form-submission/styles.scss",
"chars": 415,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n input {\n "
},
{
"path": "examples/isolating-rerendering/index.js",
"chars": 1239,
"preview": "import { render } from \"react-dom\";\nimport { useForm, useFormState } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nc"
},
{
"path": "examples/isolating-rerendering/package.json",
"chars": 471,
"preview": "{\n \"name\": \"rcf-isolating-re-rendering\",\n \"description\": \"The isolating re-rendering example of RCF.\",\n \"main\": \"inde"
},
{
"path": "examples/isolating-rerendering/styles.scss",
"chars": 513,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n label {\n "
},
{
"path": "examples/joi/index.js",
"chars": 1156,
"preview": "import { render } from \"react-dom\";\nimport { useForm, set } from \"react-cool-form\";\nimport Joi from \"joi\";\n\nimport \"./st"
},
{
"path": "examples/joi/package.json",
"chars": 477,
"preview": "{\n \"name\": \"rcf-joi\",\n \"version\": \"0.0.0\",\n \"description\": \"The Joi example of RCF.\",\n \"main\": \"index.js\",\n \"depend"
},
{
"path": "examples/joi/styles.scss",
"chars": 415,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n input {\n "
},
{
"path": "examples/lazy-default-values/index.js",
"chars": 739,
"preview": "import { useEffect } from \"react\";\nimport { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimpor"
},
{
"path": "examples/lazy-default-values/package.json",
"chars": 487,
"preview": "{\n \"name\": \"rcf-lazy-default-values\",\n \"version\": \"0.0.0\",\n \"description\": \"The lazy default values example of RCF.\","
},
{
"path": "examples/lazy-default-values/styles.scss",
"chars": 518,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n div {\n w"
},
{
"path": "examples/material-ui/index.js",
"chars": 2527,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\nimport {\n FormGroup,\n FormControl,\n Fo"
},
{
"path": "examples/material-ui/package.json",
"chars": 485,
"preview": "{\n \"name\": \"rcf-material-ui\",\n \"description\": \"The material-ui example of RCF.\",\n \"main\": \"index.js\",\n \"dependencies"
},
{
"path": "examples/material-ui/styles.scss",
"chars": 448,
"preview": "body {\n font-family: sans-serif;\n background: #fff;\n}\n\nform {\n margin: 3rem auto 0;\n width: 24rem;\n\n .MuiFormContro"
},
{
"path": "examples/multi-select/index.js",
"chars": 716,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nfunction App() "
},
{
"path": "examples/multi-select/package.json",
"chars": 451,
"preview": "{\n \"name\": \"rcf-multi-select\",\n \"description\": \"The multi-select example of RCF.\",\n \"main\": \"index.js\",\n \"dependenci"
},
{
"path": "examples/multi-select/styles.scss",
"chars": 491,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n label {\n "
},
{
"path": "examples/quick-start/index.js",
"chars": 1506,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst Field = ("
},
{
"path": "examples/quick-start/package.json",
"chars": 441,
"preview": "{\n \"name\": \"rcf-quick-start\",\n \"description\": \"The quick start of RCF.\",\n \"main\": \"index.js\",\n \"dependencies\": {\n "
},
{
"path": "examples/quick-start/styles.scss",
"chars": 566,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n div {\n w"
},
{
"path": "examples/radio-group/index.js",
"chars": 817,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst Field = ("
},
{
"path": "examples/radio-group/package.json",
"chars": 449,
"preview": "{\n \"name\": \"rcf-radio-group\",\n \"description\": \"The radio group example of RCF.\",\n \"main\": \"index.js\",\n \"dependencies"
},
{
"path": "examples/radio-group/styles.scss",
"chars": 513,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n color: #fff;"
},
{
"path": "examples/react-select/index.js",
"chars": 1255,
"preview": "import { render } from \"react-dom\";\nimport { useForm, useControlled } from \"react-cool-form\";\nimport Select from \"react-"
},
{
"path": "examples/react-select/package.json",
"chars": 481,
"preview": "{\n \"name\": \"rcf-react-select\",\n \"description\": \"The react select example of RCF.\",\n \"main\": \"index.js\",\n \"dependenci"
},
{
"path": "examples/react-select/styles.scss",
"chars": 356,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n input[type="
},
{
"path": "examples/reset-form/index.js",
"chars": 726,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst Field = ("
},
{
"path": "examples/reset-form/package.json",
"chars": 447,
"preview": "{\n \"name\": \"rcf-reset-form\",\n \"description\": \"The reset form example of RCF.\",\n \"main\": \"index.js\",\n \"dependencies\":"
},
{
"path": "examples/reset-form/styles.scss",
"chars": 518,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n div {\n w"
},
{
"path": "examples/showbox/index.js",
"chars": 1142,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nlet count = 0;\n"
},
{
"path": "examples/showbox/package.json",
"chars": 433,
"preview": "{\n \"name\": \"rcf-showbox\",\n \"description\": \"The showbox of RCF.\",\n \"main\": \"index.js\",\n \"dependencies\": {\n \"react\""
},
{
"path": "examples/showbox/styles.scss",
"chars": 650,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n .count {\n "
},
{
"path": "examples/typescript/index.tsx",
"chars": 770,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\ninterface FormV"
},
{
"path": "examples/typescript/package.json",
"chars": 447,
"preview": "{\n \"name\": \"rcf-typescript\",\n \"description\": \"The typescript example of RCF.\",\n \"main\": \"index.js\",\n \"dependencies\":"
},
{
"path": "examples/typescript/styles.scss",
"chars": 415,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n input {\n "
},
{
"path": "examples/without-form-element/index.js",
"chars": 1010,
"preview": "import { render } from \"react-dom\";\nimport { useForm } from \"react-cool-form\";\n\nimport \"./styles.scss\";\n\nconst Field = ("
},
{
"path": "examples/without-form-element/package.json",
"chars": 467,
"preview": "{\n \"name\": \"rcf-without-form-element\",\n \"description\": \"The without form element example of RCF.\",\n \"main\": \"index.js"
},
{
"path": "examples/without-form-element/styles.scss",
"chars": 642,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n\n > div {\n margin: 5rem auto 0;\n width: 24rem;\n \n di"
},
{
"path": "examples/wizard-form/.codesandbox/workspace.json",
"chars": 217,
"preview": "{\n \"responsive-preview\": {\n \"Mobile\": [\n 320,\n 675\n ],\n \"Tablet\": [\n 1024,\n 765\n ],\n "
},
{
"path": "examples/wizard-form/Step1.js",
"chars": 1315,
"preview": "import { useForm } from \"react-cool-form\";\nimport { useNavigate } from \"react-router-dom\";\n\nimport { useFormValues } fro"
},
{
"path": "examples/wizard-form/Step2.js",
"chars": 1791,
"preview": "import { forwardRef } from \"react\";\nimport { useForm } from \"react-cool-form\";\nimport { useNavigate, Link } from \"react-"
},
{
"path": "examples/wizard-form/Step3.js",
"chars": 2219,
"preview": "import { useState } from \"react\";\nimport { useForm } from \"react-cool-form\";\nimport { Link } from \"react-router-dom\";\n\ni"
},
{
"path": "examples/wizard-form/formValues.js",
"chars": 412,
"preview": "import { createContext, useState, useContext } from \"react\";\n\nconst Context = createContext();\n\nconst FormValuesProvider"
},
{
"path": "examples/wizard-form/index.js",
"chars": 635,
"preview": "import { render } from \"react-dom\";\nimport { BrowserRouter as Router, Routes, Route } from \"react-router-dom\";\n\nimport {"
},
{
"path": "examples/wizard-form/package.json",
"chars": 506,
"preview": "{\n \"name\": \"rcf-wizard-form\",\n \"description\": \"The wizard form example of RCF.\",\n \"main\": \"index.js\",\n \"dependencies"
},
{
"path": "examples/wizard-form/styles.scss",
"chars": 1191,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 3rem auto 0;\n width: 24rem;\n\n label {\n "
},
{
"path": "examples/yup/index.js",
"chars": 1795,
"preview": "import { render } from \"react-dom\";\nimport { useForm, set } from \"react-cool-form\";\nimport * as yup from \"yup\";\nimport J"
},
{
"path": "examples/yup/package.json",
"chars": 501,
"preview": "{\n \"name\": \"rcf-schema\",\n \"description\": \"The schema example of RCF.\",\n \"main\": \"index.js\",\n \"dependencies\": {\n \""
},
{
"path": "examples/yup/styles.scss",
"chars": 415,
"preview": "body {\n font-family: sans-serif;\n background: #1a1a1a;\n}\n\nform {\n margin: 5rem auto 0;\n width: 24rem;\n\n input {\n "
},
{
"path": "package.json",
"chars": 3654,
"preview": "{\n \"name\": \"react-cool-form\",\n \"version\": \"0.4.1\",\n \"description\": \"React hooks for forms state and validation, less "
},
{
"path": "scripts/jest/config.js",
"chars": 253,
"preview": "module.exports = {\n preset: \"ts-jest\",\n rootDir: \"../../\",\n testEnvironment: \"jsdom\",\n setupFilesAfterEnv: [\"<rootDi"
},
{
"path": "scripts/jest/setup.ts",
"chars": 36,
"preview": "import \"@testing-library/jest-dom\";\n"
},
{
"path": "scripts/rollup/cjsEntryFile.js",
"chars": 164,
"preview": "\"use strict\";\n\nmodule.exports =\n process.env.NODE_ENV === \"production\"\n ? require(\"./index.cjs.production.min.js\")\n "
},
{
"path": "scripts/rollup/config.js",
"chars": 631,
"preview": "import createConfig from \"./createConfig\";\n\nconst isDev = process.env.BUILD !== \"production\";\nconst name = \"index\";\ncons"
},
{
"path": "scripts/rollup/createConfig.js",
"chars": 2152,
"preview": "import resolve from \"@rollup/plugin-node-resolve\";\nimport commonjs from \"@rollup/plugin-commonjs\";\nimport babel from \"@r"
},
{
"path": "src/hooks/index.ts",
"chars": 102,
"preview": "export { default as useState } from \"./useState\";\nexport { default as useLatest } from \"./useLatest\";\n"
},
{
"path": "src/hooks/useLatest.test.ts",
"chars": 305,
"preview": "import { renderHook } from \"@testing-library/react-hooks\";\n\nimport useLatest from \"./useLatest\";\n\ndescribe(\"useLatest\", "
},
{
"path": "src/hooks/useLatest.ts",
"chars": 169,
"preview": "import { MutableRefObject, useRef } from \"react\";\n\nexport default <T>(val: T): MutableRefObject<T> => {\n const ref = us"
},
{
"path": "src/hooks/useState.test.ts",
"chars": 8853,
"preview": "import { useReducer } from \"react\";\nimport { renderHook } from \"@testing-library/react-hooks\";\n\nimport useState from \"./"
},
{
"path": "src/hooks/useState.ts",
"chars": 2665,
"preview": "import { useReducer, useRef, useCallback } from \"react\";\nimport { dequal } from \"dequal/lite\";\n\nimport {\n FormState,\n "
},
{
"path": "src/index.ts",
"chars": 331,
"preview": "export { default as useForm } from \"./useForm\";\nexport { default as useFormMethods } from \"./useFormMethods\";\nexport { d"
},
{
"path": "src/shared.test.ts",
"chars": 362,
"preview": "import { get, set, remove } from \"./shared\";\n\ndescribe(\"shared\", () => {\n it.each([\"form-1\", undefined])(\"should work c"
},
{
"path": "src/shared.ts",
"chars": 453,
"preview": "import { Methods, ObjMap } from \"./types\";\n\nlet one: Methods | undefined;\nconst all: ObjMap<Methods> = {};\n\nexport const"
},
{
"path": "src/types/global.d.ts",
"chars": 239,
"preview": "declare const __DEV__: boolean;\n\ninterface Window {\n requestIdleCallback: (\n callback: (deadline: {\n readonly d"
},
{
"path": "src/types/index.ts",
"chars": 8561,
"preview": "import {\n FocusEventHandler,\n MutableRefObject,\n RefCallback,\n SyntheticEvent,\n} from \"react\";\n\n// Utils\nexport type"
},
{
"path": "src/types/react-cool-form.d.ts",
"chars": 8858,
"preview": "declare module \"react-cool-form\" {\n import { FocusEventHandler, RefCallback, SyntheticEvent } from \"react\";\n\n // Type "
},
{
"path": "src/useControlled.test.tsx",
"chars": 18012,
"preview": "/* eslint-disable react/no-unused-prop-types */\n\nimport { Dispatch, forwardRef, useState } from \"react\";\nimport {\n rend"
},
{
"path": "src/useControlled.ts",
"chars": 3558,
"preview": "import { useEffect } from \"react\";\n\nimport {\n ControlledConfig,\n ControlledReturn,\n FormValues,\n Methods,\n} from \"./"
},
{
"path": "src/useFieldArray.test.tsx",
"chars": 25296,
"preview": "/* eslint-disable react/no-unused-prop-types */\n\nimport { Dispatch, useState } from \"react\";\nimport {\n render,\n fireEv"
},
{
"path": "src/useFieldArray.ts",
"chars": 5402,
"preview": "import { useCallback, useEffect, useState } from \"react\";\n\nimport {\n FieldArrayConfig,\n FieldArrayReturn,\n FormValues"
},
{
"path": "src/useForm.test.tsx",
"chars": 71809,
"preview": "/* eslint-disable react/no-unused-prop-types */\n\nimport { Dispatch, useState } from \"react\";\nimport {\n render,\n fireEv"
},
{
"path": "src/useForm.ts",
"chars": 29555,
"preview": "/* eslint-disable @typescript-eslint/no-use-before-define */\n\nimport { useCallback, useEffect, useRef } from \"react\";\nim"
},
{
"path": "src/useFormMethods.test.tsx",
"chars": 1740,
"preview": "import { render } from \"@testing-library/react\";\n\nimport { FormMethods } from \"./types\";\nimport useForm from \"./useForm\""
},
{
"path": "src/useFormMethods.ts",
"chars": 871,
"preview": "import { FormMethods, FormValues, Methods } from \"./types\";\nimport { get } from \"./shared\";\nimport { invariant } from \"."
},
{
"path": "src/useFormState.test.tsx",
"chars": 5753,
"preview": "import { useEffect } from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\n\nimport { FormSta"
},
{
"path": "src/useFormState.ts",
"chars": 1659,
"preview": "/* eslint-disable react-hooks/rules-of-hooks */\n\nimport { useEffect, useReducer, useRef } from \"react\";\n\nimport {\n Form"
},
{
"path": "src/utils/arrayToMap.test.ts",
"chars": 242,
"preview": "import arrayToMap from \"./arrayToMap\";\n\ndescribe(\"arrayToMap\", () => {\n it(\"should work correctly\", () => {\n expect("
},
{
"path": "src/utils/arrayToMap.ts",
"chars": 197,
"preview": "import { ObjMap } from \"../types\";\n\nexport default (arr: any[], map: Record<string, string> = {}): ObjMap =>\n arr.reduc"
},
{
"path": "src/utils/cloneObject.test.ts",
"chars": 757,
"preview": "import cloneObject from \"./cloneObject\";\n\ndescribe(\"cloneObject\", () => {\n it(\"should throw error when target is an eve"
},
{
"path": "src/utils/cloneObject.ts",
"chars": 600,
"preview": "import isFileList from \"./isFileList\";\nimport isObject from \"./isObject\";\n\nconst cloneObject = (object: unknown): any =>"
},
{
"path": "src/utils/compact.test.ts",
"chars": 258,
"preview": "import compact from \"./compact\";\n\ndescribe(\"compact\", () => {\n it(\"should work correctly\", () => {\n expect(compact(["
},
{
"path": "src/utils/compact.ts",
"chars": 59,
"preview": "export default (arr: any[]): any[] => arr.filter(Boolean);\n"
},
{
"path": "src/utils/deepMerge.test.ts",
"chars": 2698,
"preview": "import deepMerge from \"./deepMerge\";\n\ndescribe(\"deepMerge\", () => {\n it(\"should merge different types of values correct"
}
]
// ... and 71 more files (download for full content)
About this extraction
This page contains the full source code of the wellyshen/react-cool-form GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 271 files (548.3 KB), approximately 159.0k tokens, and a symbol index with 158 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.