[
{
"path": ".all-contributorsrc",
"content": "{\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"commit\": false,\n \"contributors\": [\n {\n \"login\": \"wellyshen\",\n \"name\": \"Welly\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/21308003?v=4\",\n \"profile\": \"http://wellyshen.com\",\n \"contributions\": [\n \"ideas\",\n \"code\",\n \"doc\",\n \"infra\",\n \"maintenance\"\n ]\n },\n {\n \"login\": \"Chris-James\",\n \"name\": \"Chris\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/4596428?v=4\",\n \"profile\": \"https://github.com/Chris-James\",\n \"contributions\": [\n \"bug\"\n ]\n }\n ],\n \"contributorsPerLine\": 7,\n \"projectName\": \"react-cool-form\",\n \"projectOwner\": \"wellyshen\",\n \"repoType\": \"github\",\n \"repoHost\": \"https://github.com\",\n \"skipCi\": true\n}\n"
},
{
"path": ".changeset/README.md",
"content": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works\nwith multi-package repos, or single-package repos to help you version and publish your code. You can\nfind the full documentation for it [in our repository](https://github.com/changesets/changesets)\n\nWe have a quick list of common questions to get you started engaging with this project in\n[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)\n"
},
{
"path": ".changeset/config.json",
"content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@1.7.0/schema.json\",\n \"changelog\": [\n \"@changesets/changelog-github\",\n { \"repo\": \"wellyshen/react-cool-form\" }\n ],\n \"commit\": false,\n \"linked\": [],\n \"access\": \"public\",\n \"baseBranch\": \"master\",\n \"updateInternalDependencies\": \"patch\",\n \"ignore\": []\n}\n"
},
{
"path": ".eslintignore",
"content": "dist\nscripts/rollup\napp\nexamples\nwebsite"
},
{
"path": ".eslintrc.js",
"content": "module.exports = {\n extends: [\"welly\"],\n rules: {\n eqeqeq: \"off\",\n camelcase: \"off\",\n \"no-shadow\": \"off\",\n \"no-console\": [\n \"warn\",\n {\n allow: [\"warn\", \"error\"],\n },\n ],\n \"no-param-reassign\": \"off\",\n \"no-underscore-dangle\": \"off\",\n \"no-sparse-arrays\": \"off\",\n \"no-restricted-syntax\": \"off\",\n \"react/react-in-jsx-scope\": \"off\",\n \"react/require-default-props\": \"off\",\n \"@typescript-eslint/ban-types\": \"off\",\n \"@typescript-eslint/no-non-null-assertion\": \"off\",\n \"testing-library/render-result-naming-convention\": \"off\",\n },\n settings: {\n polyfills: [\"Promise\"],\n },\n};\n"
},
{
"path": ".github/FUNDING.yml",
"content": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]\npatreon: # Replace with a single Patreon username\nopen_collective: react-cool-form\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"content": "---\nname: \"\\U0001F41B Bug Report\"\nabout: Create a report to help us improve\ntitle: \"\"\nlabels: \"\"\nassignees: \"\"\n---\n\n# Bug Report\n\n## Describe the Bug\n\nA clear and concise description of what the bug is.\n\n## How to Reproduce\n\nSteps to reproduce the behavior, please provide code snippets or a repository:\n\n1. Go to '....'\n2. Click on '....'\n3. See error\n\n## CodeSandbox Link\n\nShow me the bug on [CodeSandbox](https://codesandbox.io).\n\n## Expected Behavior\n\nTell me what should happen.\n\n## Screenshots\n\nAdd screenshots to help explain your problem.\n\n## Your Environment\n\n- Device: [e.g. MacBook Pro, iPhone12]\n- OS: [e.g. macOS, iOS, Windows]\n- Browser: [e.g. Chrome, Safari]\n- Version: [e.g. v1.0.0]\n\n## Additional Information\n\nAny other information about the problem here.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"content": "---\nname: \"\\U0001F4A1 Feature Request\"\nabout: Suggest an idea for this project\ntitle: \"\"\nlabels: \"\"\nassignees: \"\"\n---\n\n# Feature Request\n\n## Describe the Feature\n\nA clear and concise description of what you want and what your use case is.\n\n## Describe the Solution You'd Like\n\nA clear and concise description of what you want to happen.\n\n## Describe Alternatives You've Considered\n\nA clear and concise description of any alternative solutions or features you've considered.\n\n## Additional Information\n\nAny other information about the feature here.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/question.md",
"content": "---\nname: \"\\U0001F914 Questions and Help\"\nabout: This issue tracker is not for questions. Please ask questions at https://stackoverflow.com/questions/tagged/react.\ntitle: \"\"\nlabels: \"\"\nassignees: \"\"\n---\n\nGitHub 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.\n\n## Coding Questions\n\nIf 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.\n\nhttps://stackoverflow.com/questions/tagged/react\n\n## Support Forums\n\nThere are many online forums which are a great place for discussion about best practices and application architecture.\n\nhttps://reactjs.org/community/support.html#popular-discussion-forums\n"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"content": "\n\n## What\n\nWhat changes are being made? (e.g. feature, bug, docs, etc.)\n\n## Why\n\nWhy are these changes necessary?\n\n## How\n\nHow were these changes implemented?\n\n## Checklist\n\nHave you done all of these things?\n\n\n\n\n- [ ] [Documentation](https://github.com/wellyshen/react-cool-form/tree/master/docs) added\n- [ ] Tests\n- [ ] TypeScript definitions updated\n- [ ] [Add a changeset](https://github.com/atlassian/changesets/blob/master/docs/adding-a-changeset.md)\n- [ ] Ready to be merged\n"
},
{
"path": ".github/dependabot.yml",
"content": "version: 2\nupdates:\n - package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: daily\n time: \"21:00\"\n open-pull-requests-limit: 10\n ignore:\n - dependency-name: \"@changesets/changelog-github\"\n versions:\n - 0.3.0\n - 0.4.0\n - dependency-name: \"@rollup/plugin-commonjs\"\n versions:\n - 18.0.0\n - dependency-name: husky\n versions:\n - 5.0.9\n - 5.1.1\n - 6.0.0\n - dependency-name: rollup\n versions:\n - 2.40.0\n - 2.42.4\n - dependency-name: \"@testing-library/user-event\"\n versions:\n - 13.0.0\n - 13.0.1\n - 13.0.2\n - 13.0.3\n - 13.0.6\n - 13.0.7\n"
},
{
"path": ".github/workflows/codeql-analysis.yml",
"content": "name: \"CodeQL\"\n\non:\n push:\n branches: [master]\n pull_request:\n branches: [master]\n schedule:\n # ┌───────────── minute (0 - 59)\n # │ ┌───────────── hour (0 - 23)\n # │ │ ┌───────────── day of the month (1 - 31)\n # │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)\n # │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)\n # │ │ │ │ │\n # │ │ │ │ │\n # │ │ │ │ │\n # * * * * *\n - cron: \"40 18 * * 1\"\n\njobs:\n CodeQL-Build:\n # CodeQL runs on ubuntu-latest, windows-latest, and macos-latest\n runs-on: ubuntu-latest\n\n permissions:\n # required for all workflows\n security-events: write\n\n # only required for workflows in private repositories\n actions: read\n contents: read\n\n steps:\n - name: Checkout repository\n uses: actions/checkout@v3\n\n # Initializes the CodeQL tools for scanning.\n - name: Initialize CodeQL\n uses: github/codeql-action/init@v2\n # Override language selection by uncommenting this and choosing your languages\n with:\n languages: javascript\n\n # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).\n # If this step fails, then you should remove it and run the build manually (see below).\n - name: Autobuild\n uses: github/codeql-action/autobuild@v2\n\n # ℹ️ Command-line programs to run using the OS shell.\n # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun\n\n # ✏️ If the Autobuild fails above, remove it and uncomment the following\n # three lines and modify them (or add more) to build your code if your\n # project uses a compiled language\n\n #- run: |\n # make bootstrap\n # make release\n\n - name: Perform CodeQL Analysis\n uses: github/codeql-action/analyze@v2\n"
},
{
"path": ".github/workflows/release.yml",
"content": "name: Release\n\non:\n push:\n branches:\n - master\n\njobs:\n release:\n name: Release\n runs-on: ubuntu-latest\n steps:\n - name: Checkout Repo\n uses: actions/checkout@v3\n\n - name: Setup Node.js 16\n uses: actions/setup-node@v3\n with:\n node-version: 16\n\n - name: Install Dependencies\n run: yarn\n\n - name: Create Release Pull Request or Publish to npm\n id: changesets\n uses: changesets/action@v1\n with:\n # This expects you to have a script called release which does a build for your packages and calls changeset publish\n publish: yarn release\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n"
},
{
"path": ".github/workflows/size.yml",
"content": "name: Compressed Size\n\non: [pull_request]\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v3\n - uses: preactjs/compressed-size-action@v2\n with:\n repo-token: \"${{ secrets.GITHUB_TOKEN }}\"\n build-script: \"build:prod\"\n"
},
{
"path": ".github/workflows/tests.yml",
"content": "name: Lint / Test / Size\n\non:\n push:\n branches:\n - master\n tags-ignore:\n - \"**\"\n pull_request:\n branches:\n - master\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node: [16]\n\n steps:\n - uses: actions/checkout@v3\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v3\n with:\n node-version: ${{ matrix.node-version }}\n\n - name: Get yarn cache directory path\n id: yarn-cache-dir-path\n run: echo \"::set-output name=dir::$(yarn cache dir)\"\n - uses: actions/cache@v3\n id: yarn-cache\n with:\n path: ${{ steps.yarn-cache-dir-path.outputs.dir }}\n key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}\n restore-keys: |\n ${{ runner.os }}-yarn-\n\n - name: Install dependencies\n run: yarn install --frozen-lockfile\n - name: Run lint\n run: yarn lint\n - name: Run test\n run: yarn test:cov\n - name: Run size limit\n run: yarn size\n\n - name: Coveralls GitHub Action\n uses: coverallsapp/github-action@master\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n"
},
{
"path": ".gitignore",
"content": "# 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",
"content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nyarn lint-staged\n"
},
{
"path": ".husky/pre-push",
"content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nyarn test\nyarn size\n"
},
{
"path": ".nvmrc",
"content": "lts/*\n"
},
{
"path": ".prettierignore",
"content": "dist\ncoverage\napp\nexamples\nwebsite\n\n*.log\n.size-snapshot.json"
},
{
"path": ".vscode/launch.json",
"content": "{\n // Use IntelliSense to learn about possible attributes.\n // Hover to view descriptions of existing attributes.\n // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"type\": \"chrome\",\n \"request\": \"launch\",\n \"name\": \"Launch Chrome against localhost\",\n \"url\": \"http://localhost:3000\",\n \"webRoot\": \"${workspaceFolder}\"\n }\n ]\n}\n"
},
{
"path": ".vscode/settings.json",
"content": "{\n \"typescript.tsdk\": \"node_modules/typescript/lib\"\n}\n"
},
{
"path": "CHANGELOG.md",
"content": "# react-cool-form\n\n## 0.4.1\n\n### Patch Changes\n\n- [#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\n\n## 0.4.0\n\n### Minor Changes\n\n- [#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\n\n## 0.3.1\n\n### Patch Changes\n\n- [#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\n\n## 0.3.0\n\n### Minor Changes\n\n- [#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\n\n## 0.2.2\n\n### Patch Changes\n\n- [#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\n\n## 0.2.1\n\n### Patch Changes\n\n- [#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`\n\n## 0.2.0\n\n### Minor Changes\n\n- [#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`\n\n## 0.0.171\n\n### Patch Changes\n\n- [#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\n\n## 0.0.170\n\n### Patch Changes\n\n- [#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`\n\n## 0.0.169\n\n### Patch Changes\n\n- [#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\n\n## 0.0.168\n\n### Patch Changes\n\n- [`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\n\n* [`c865f58`](https://github.com/wellyshen/react-cool-form/commit/c865f58504e416ccd55b4b2022f3092c1c841c80) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: remove \"missing field name\" warnings\n\n## 0.0.167\n\n### Patch Changes\n\n- [#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\n\n## 0.0.166\n\n### Patch Changes\n\n- [#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\n\n## 0.0.164\n\n### Patch Changes\n\n- [#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\n\n* [#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\n\n- [#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\n\n## 0.0.163\n\n### Patch Changes\n\n- [#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\n\n## 0.0.162\n\n### Patch Changes\n\n- [#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\n\n## 0.0.161\n\n### Patch Changes\n\n- [#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\n\n## 0.0.160\n\n### Patch Changes\n\n- [`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\n\n* [`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\n\n- [`3fb100e`](https://github.com/wellyshen/react-cool-form/commit/3fb100e263cae996acc28e87d611434f5a862836) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): `mon(\"submitCount\")` not triggering re-rendering\n\n## 0.0.159\n\n### Patch Changes\n\n- [`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\n\n* [`b3ec2f7`](https://github.com/wellyshen/react-cool-form/commit/b3ec2f7c105b53922ded53d84deffd8d0eaf012b) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useForm): reduce bundle size\n\n- [`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\n\n* [`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\n\n## 0.0.158\n\n### Patch Changes\n\n- [#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\n\n## 0.0.157\n\n### Patch Changes\n\n- [#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\n\n* [`341aa21`](https://github.com/wellyshen/react-cool-form/commit/341aa214d02dd7de8834827b4c3158d7e1acefb8) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: refine the warning of getting `values` only\n\n- [`9dc4993`](https://github.com/wellyshen/react-cool-form/commit/9dc4993824083c9086927281135fb9265fd3936e) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(useFormState): code refactor for smaller bundle size\n\n## 0.0.156\n\n### Patch Changes\n\n- [#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\n\n* [#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\n\n- [#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\n\n## 0.0.155\n\n### Patch Changes\n\n- [#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\n\n## 0.0.154\n\n### Patch Changes\n\n- [#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\n\n* [`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\n\n## 0.0.153\n\n### Patch Changes\n\n- [`7de1f62`](https://github.com/wellyshen/react-cool-form/commit/7de1f62fb3b03d1aef8a5fe7041fedf1a48931fe) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs(readme): add arrays-and-lists feature\n\n* [#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\n\n- [`c2459ee`](https://github.com/wellyshen/react-cool-form/commit/c2459eebbd18fd2cdbf58aa3552d51cbc650c5c0) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor(types): rename `Map` to `ObjMap`\n\n## 0.0.152\n\n### Patch Changes\n\n- [`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\n\n## 0.0.151\n\n### Patch Changes\n\n- [`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\n\n## 0.0.150\n\n### Patch Changes\n\n- [`98cd462`](https://github.com/wellyshen/react-cool-form/commit/98cd46202296b720dff48352fd90d418596599b4) Thanks [@wellyshen](https://github.com/wellyshen)! - Docs(readme): update features section\n\n* [`cd8755b`](https://github.com/wellyshen/react-cool-form/commit/cd8755b265b6ec592312cb2690f18650ee1919de) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): correct form ID warning message\n\n## 0.0.149\n\n### Patch Changes\n\n- [`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\n\n## 0.0.148\n\n### Patch Changes\n\n- [#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\n\n## 0.0.147\n\n### Patch Changes\n\n- [#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\n\n* [#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\n\n## 0.0.146\n\n### Patch Changes\n\n- [`68b340a`](https://github.com/wellyshen/react-cool-form/commit/68b340a93188b23fd22303e7c097770be7b0cc56) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): correct the type of return values\n\n## 0.0.145\n\n### Patch Changes\n\n- [#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\n\n## 0.0.144\n\n### Patch Changes\n\n- [#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\n\n## 0.0.143\n\n### Patch Changes\n\n- [`4f9ae54`](https://github.com/wellyshen/react-cool-form/commit/4f9ae542010d413b1bc466a99b7c479249e39b2e) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFieldArray): reset fields not working properly\n\n* [`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\n\n## 0.0.142\n\n### Patch Changes\n\n- [#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\n\n* [#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\n\n## 0.0.140\n\n### Patch Changes\n\n- [#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\n\n* [#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)\n\n- [`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\n\n## 0.0.139\n\n### Patch Changes\n\n- [`9bb9992`](https://github.com/wellyshen/react-cool-form/commit/9bb9992c666d52c17ce929d7d273b2fd885766b3) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: refine warning messages\n\n## 0.0.138\n\n### Patch Changes\n\n- [`889e331`](https://github.com/wellyshen/react-cool-form/commit/889e3319d5f064607cef4dec42a3e5fb32cdadb4) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(utils): the side-effect of `cloneObject`\n\n## 0.0.137\n\n### Patch Changes\n\n- [`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\n\n## 0.0.136\n\n### Patch Changes\n\n- [`c066ecc`](https://github.com/wellyshen/react-cool-form/commit/c066ecc5004d6b29d9d649a41f99290d5f52234f) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: reduce bundle size\n\n## 0.0.135\n\n### Patch Changes\n\n- [`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\n\n* [`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`'\n\n- [`ae11590`](https://github.com/wellyshen/react-cool-form/commit/ae115903890ee8d1b8f8d79d4acb399a375244c6) Thanks [@wellyshen](https://github.com/wellyshen)! - Refactor: refine missing \"name\" warnings\n\n## 0.0.134\n\n### Patch Changes\n\n- [`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\n\n* [`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\n\n## 0.0.133\n\n### Patch Changes\n\n- [`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\n\n## 0.0.132\n\n### Patch Changes\n\n- [`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\n\n* [`ada163b`](https://github.com/wellyshen/react-cool-form/commit/ada163b04922341575a9b979530f31006bfb9203) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(types): enhance the readability of type\n\n- [`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\n\n## 0.0.131\n\n### Patch Changes\n\n- [`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\n\n## 0.0.130\n\n### Patch Changes\n\n- [`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\n\n## 0.0.129\n\n### Patch Changes\n\n- [`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\n\n## 0.0.128\n\n### Patch Changes\n\n- [`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\n\n## 0.0.126\n\n### Patch Changes\n\n- [`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\n\n## 0.0.125\n\n### Patch Changes\n\n- [`eb767bd`](https://github.com/wellyshen/react-cool-form/commit/eb767bd4758ebbec37efde3975c1eab822d2de6b) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useForm): fix set default values side-effect\n\n## 0.0.124\n\n### Patch Changes\n\n- [`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\n\n## 0.0.123\n\n### Patch Changes\n\n- [`e7795c3`](https://github.com/wellyshen/react-cool-form/commit/e7795c30c36b26e402d4b07e458ee2f5f2617063) Thanks [@wellyshen](https://github.com/wellyshen)! - Fix(useFormState): correct the URL of warnings\n\n## 0.0.122\n\n### Patch Changes\n\n- [`3f92f38`](https://github.com/wellyshen/react-cool-form/commit/3f92f3861baa7bfe51e1ba67525055c0ae97f09d) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat: new `useFormState` hook\n\n## 0.0.121\n\n### Patch Changes\n\n- [`cc3eb6c`](https://github.com/wellyshen/react-cool-form/commit/cc3eb6c845ba540de38bc2cab9a708b5bbc6739f) Thanks [@wellyshen](https://github.com/wellyshen)! - Feat(useForm): add `false` type for form validator\n\n## 0.0.120\n\n### Patch Changes\n\n- [`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\n\n## 0.0.119\n\n### Patch Changes\n\n- [`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\n\n* [`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\n\n## 0.0.118\n\n### Patch Changes\n\n- [`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\n\n## 0.0.117\n\n### Patch Changes\n\n- [`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\n\n## 0.0.116\n\n### Patch Changes\n\n- [`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\n\n## 0.0.115\n\n### Patch Changes\n\n- [`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\n\n## 0.0.114\n\n### Patch Changes\n\n- [`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\n\n## 0.0.113\n\n### Patch Changes\n\n- [`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\n\n## 0.0.112\n\n### Patch Changes\n\n- [`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 \n );\n};\n```\n\n✨ Pretty easy right? React Cool Form is more powerful than you think. Let's [explore it](https://react-cool-form.netlify.app) now!\n\n## Articles / Blog Posts \n\n> 💡 If you have written any blog post or article about React Cool Form, please open a PR to add it here.\n\n- Featured on [React Status #245](https://react.statuscode.com/issues/245).\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n"
},
{
"path": "SECURITY.md",
"content": "# Security Policy\n\n## Supported Versions\n\nUse this section to tell people about which versions of your project are\ncurrently being supported with security updates.\n\n| Version | Supported |\n| ------- | ------------------ |\n| 5.1.x | :white_check_mark: |\n| 5.0.x | :x: |\n| 4.0.x | :white_check_mark: |\n| < 4.0 | :x: |\n\n## Reporting a Vulnerability\n\nUse this section to tell people how to report a vulnerability.\n\nTell them where to go, how often they can expect to get an update on a\nreported vulnerability, what to expect if the vulnerability is accepted or\ndeclined, etc.\n"
},
{
"path": "app/.eslintignore",
"content": "build"
},
{
"path": "app/.eslintrc.js",
"content": "module.exports = {\n extends: [\"react-app\", \"welly\"],\n rules: { \"react/react-in-jsx-scope\": \"off\" },\n};\n"
},
{
"path": "app/.gitignore",
"content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n.pnp\n.pnp.js\n\n# testing\ncoverage\n\n# production\nbuild\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n.eslintcache\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
},
{
"path": "app/.prettierignore",
"content": "# 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\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
},
{
"path": "app/.stylelintrc.js",
"content": "module.exports = {\n extends: [\"stylelint-config-standard\", \"stylelint-config-prettier\"],\n ignoreFiles: [\"build/**/*.css\"],\n};\n"
},
{
"path": "app/README.md",
"content": "# App\n\n🧪 A place for trying something interesting.\n"
},
{
"path": "app/package.json",
"content": "{\n \"name\": \"rcf-app\",\n \"private\": true,\n \"scripts\": {\n \"link-pkg\": \"yarn link 'react-cool-form'\",\n \"start:auto\": \"react-scripts start\",\n \"start:dev\": \"REACT_APP_ENV=dev react-scripts start\",\n \"start:prod\": \"yarn build && serve -s build\",\n \"build\": \"react-scripts build\",\n \"lint\": \"run-s lint:*\",\n \"lint:code\": \"eslint --fix . --ext .js,.ts,.tsx\",\n \"lint:type\": \"tsc\",\n \"lint:style\": \"stylelint --fix \\\"**/*.{css,ts,tsx}\\\"\",\n \"lint:format\": \"prettier -w . -u --loglevel silent\",\n \"clean\": \"rimraf build\",\n \"eject\": \"react-scripts eject\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.4.0\",\n \"@types/node\": \"^16.4.1\",\n \"@types/react\": \"^17.0.14\",\n \"@types/react-dom\": \"^17.0.9\",\n \"normalize.css\": \"^8.0.1\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"5.0.0\",\n \"typescript\": \"^4.3.5\"\n },\n \"devDependencies\": {\n \"eslint-config-welly\": \"^1.13.0\",\n \"npm-run-all\": \"^4.1.5\",\n \"prettier\": \"^2.3.2\",\n \"rimraf\": \"^3.0.2\",\n \"serve\": \"^13.0.2\",\n \"stylelint\": \"^13.13.1\",\n \"stylelint-config-prettier\": \"^8.0.2\",\n \"stylelint-config-standard\": \"^22.0.0\"\n }\n}\n"
},
{
"path": "app/public/index.html",
"content": "\n\n \n \n \n \n \n \n \n \n \n \n \n React Cool Form\n \n \n \n \n \n \n\n"
},
{
"path": "app/public/manifest.json",
"content": "{\n \"short_name\": \"REACT COOL IMG\",\n \"name\": \"REACT COOL IMG\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n"
},
{
"path": "app/public/robots.txt",
"content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "app/src/App/index.tsx",
"content": "import { Global, css } from \"@emotion/react\";\nimport normalize from \"normalize.css\";\n\nimport Playground from \"../Playground\";\nimport Automation from \"../Automation\";\nimport { root } from \"./styles\";\n\nexport default (): JSX.Element => (\n <>\n \n {process.env.REACT_APP_ENV === \"dev\" ? : }\n \n);\n"
},
{
"path": "app/src/App/styles.ts",
"content": "import { css } from \"@emotion/react\";\n\n// eslint-disable-next-line import/prefer-default-export\nexport const root = css`\n body {\n font-family: \"Roboto\", sans-serif;\n }\n`;\n"
},
{
"path": "app/src/Automation/index.tsx",
"content": "const Automation = (): JSX.Element =>
Automation
;\n\nexport default Automation;\n"
},
{
"path": "app/src/Playground/index.tsx",
"content": "/* eslint-disable no-console */\n\nimport { useForm } from \"react-cool-form\";\n\nexport default () => {\n const { form, runValidation } = useForm({\n // validate: () => ({ foo: \"Required\" }),\n focusOnError: [\"foo\"],\n });\n\n return (\n <>\n \n \n \n );\n};\n"
},
{
"path": "app/src/index.tsx",
"content": "import { StrictMode } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nReactDOM.render(\n \n \n ,\n document.getElementById(\"root\")\n);\n"
},
{
"path": "app/src/react-app-env.d.ts",
"content": "/// \n/// \n"
},
{
"path": "app/src/types/index.d.ts",
"content": "declare module \"*.css\";\n"
},
{
"path": "app/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react-jsx\"\n },\n \"include\": [\"src\"]\n}\n"
},
{
"path": "babel.config.json",
"content": "{\n \"presets\": [\n [\n \"@babel/env\",\n {\n \"loose\": true,\n \"exclude\": [\n \"@babel/plugin-transform-async-to-generator\",\n \"@babel/plugin-transform-regenerator\"\n ]\n }\n ],\n \"@babel/typescript\",\n \"@babel/react\"\n ]\n}\n"
},
{
"path": "bundlesize.config.json",
"content": "{\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",
"content": "---\nid: use-controlled\ntitle: useControlled\n---\n\nThis 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.\n\n:::note\nWhen working with [conditional fields](../examples/conditional-fields), please ensure the hook is wrapped in a component.\n:::\n\n```js\nconst [fieldProps, meta] = useControlled(name, config);\n```\n\n## Name\n\n`string`\n\nThe name of the field. We must provide it when using this hook.\n\n## Config\n\nAn `object` with the following options:\n\n### formId\n\n`string`\n\nThe [corresponding ID](./use-form#id) of the `useForm` hook. We only need it when using multiple form hooks at the same time.\n\n### defaultValue\n\n`string`\n\nThe default value of the field. Useful for dealing with the case of [conditional fields](../examples/conditional-fields).\n\n### validation\n\n`(value: any, values: FormValues) => any | Promise`\n\nA synchronous/asynchronous function that is used for the [field-level validation](../getting-started/validation-guide#field-level-validation).\n\n### parse\n\n`(...args: any[]) => any`\n\nA 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.\n\n### format\n\n`(value: any) => any`\n\nA 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`.\n\n### errorWithTouched\n\n`boolean`\n\nEnable/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`.\n\n```js\n// Current state: { errors: { foo: \"Required\" }, touched: {} }\n// Returns \"Required\"\nconst [, { error }] = useControlled(\"foo\");\n\n// Current state: { errors: { foo: \"Required\" }, touched: {} }\n// Returns undefined\nconst [, { error }] = useControlled(\"foo\", { errorWithTouched: true });\n\n// Current state: { errors: { foo: \"Required\" }, touched: { foo: true } }\n// Returns \"Required\"\nconst [, { error }] = useControlled(\"foo\", { errorWithTouched: true });\n```\n\n### ...restProps\n\nAny other props that will be spread into the `fieldProps`.\n\n## Field Props\n\nAn `object` with the following properties:\n\n### name\n\n`string`\n\nThe name of the field.\n\n### value\n\n`any`\n\nThe value of the field.\n\n### onChange\n\n`(...event: any[]) => void`\n\nAn event handler called when the field's value changed.\n\n### onBlur\n\n`(e: React.FocusEvent) => void`\n\nAn event handler called when the field loses focus.\n\n### ...restProps\n\nAny other props that were passed to the `config`.\n\n## Meta\n\nAn `object` with the following properties:\n\n### error\n\n`string | undefined`\n\nThe current validation error of the field.\n\n### isTouched\n\n`boolean`\n\nTo indicate whether the field has been touched/visited.\n\n### isDirty\n\n`boolean`\n\nTo indicate whether the field has been modified.\n\n## Example\n\nThe example demonstrates the basic usage of this hook.\n\n:::note\nWhen using the hook (and not working with [field-array](../getting-started/arrays-and-lists#dealing-with-array-fields)), a default value is required.\n:::\n\n```js\nimport { useControlled } from \"react-cool-form\";\n\nconst Field = ({\n as,\n name,\n defaultValue,\n validate,\n parse,\n format,\n errorWithTouched,\n ...restProps\n}) => {\n const [fieldProps, { error, isTouched, isDirty }] = useControlled(name, {\n defaultValue,\n validate,\n parse,\n format,\n errorWithTouched,\n ...restProps,\n });\n const Component = as;\n\n return ;\n};\n```\n"
},
{
"path": "docs/api-reference/use-field-array.md",
"content": "---\nid: use-field-array\ntitle: useFieldArray\n---\n\nThis 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.\n\n```js\nconst [fields, helpers] = useFieldArray(name, config);\n```\n\n## Name\n\n`string`\n\nThe name of the field. We must provide it when using this hook.\n\n## Config\n\nAn `object` with the following options:\n\n### formId\n\n`string`\n\nThe [corresponding ID](./use-form#id) of the `useForm` hook. We only need it when using multiple form hooks at the same time.\n\n### defaultValue\n\n`string`\n\nThe default value of the field. Useful for dealing with the case of [conditional fields](../examples/conditional-fields).\n\n### validation\n\n`(value: any, values: FormValues) => any | Promise`\n\nA synchronous/asynchronous function that is used for the [field-level validation](../getting-started/validation-guide#field-level-validation).\n\n## Fields\n\n`string[]`\n\nAn array that holds field names (e.g. `foo[0]`, `foo[1]`), which can be used for the `key` and `name` attributes of a field.\n\n- 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.\n- 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.\n\n```js\nconst [fields] = useFieldArray(\"foo\", { defaultValue: [{ name: \"Iron Man\" }] });\n\n// The first parameter of the callback supplies you a field name (e.g. foo[0], foo[1])\nfields.map((fieldName) => (\n \n));\n```\n\n## Helpers\n\nAn `object` with the following methods:\n\n### push\n\n`(value: FieldValue, options?: Object) => void`\n\nAdd a value to the end of an array.\n\n```js\nconst handleAdd = () => {\n push(\n { name: \"Iron Man\" },\n {\n shouldTouched: false, // (Default = false) Set the field as touched\n shouldDirty: true, // (Default = true) Set the field as dirty\n }\n );\n};\n```\n\n### insert\n\n`(index: number, value: FieldValue, options?: Object) => void`\n\nInsert an element at a given index into the array.\n\n```js\nconst handleInsert = () => {\n insert(\n 0,\n { name: \"Iron Man\" },\n {\n shouldTouched: false, // (Default = false) Set the field as touched\n shouldDirty: true, // (Default = true) Set the field as dirty\n }\n );\n};\n```\n\n### swap\n\n`(indexA: number, indexB: number) => void`\n\nSwap two values in an array.\n\n### move\n\n`(from: number, to: number) => void`\n\nMove an element in an array to another index.\n\n### remove\n\n`(index: number) => FieldValue`\n\nRemove an element at an index of an array and return it.\n\n## Example\n\nThe example demonstrates the basic usage of this hook.\n\n```js\nimport { useForm, useFieldArray } from \"react-cool-form\";\n\nconst App = () => {\n const { form } = useForm({\n defaultValues: { foo: [{ name: \"Iron Man\" }] },\n });\n const [fields, { push, insert, move, swap, remove }] = useFieldArray(\"foo\");\n\n return (\n \n );\n};\n```\n"
},
{
"path": "docs/api-reference/use-form-methods.md",
"content": "---\nid: use-form-methods\ntitle: useFormMethods\n---\n\nThis 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.\n\n```js\nconst methods = useFormMethods(formId);\n```\n\n## formId\n\n`string`\n\nThe [corresponding ID](./use-form#id) of the `useForm` hook. We only need it when using multiple form hooks at the same time.\n\n## methods\n\nThe [methods](./use-form#methods) are the same as the `useForm` hook.\n\n## Example\n\nThe example demonstrates the basic usage of this hook.\n\n```js\nimport { useFormMethods } from \"react-cool-form\";\n\nconst Field = ({ as, name, onFocus, ...restProps }) => {\n const { clearErrors, ...otherMethods } = useFormMethods();\n const Component = as;\n\n return (\n {\n clearErrors(name);\n if (onFocus) onFocus(e);\n }}\n {...restProps}\n />\n );\n};\n```\n"
},
{
"path": "docs/api-reference/use-form-state.md",
"content": "---\nid: use-form-state\ntitle: useFormState\n---\n\nThis hook can be used for two purposes:\n\n- 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.\n- 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.\n\n```js\n// Isolating re-rendering mode\nconst props = useFormState(path, config);\n\n// On state change event mode\nuseFormState(path, callback, formId);\n```\n\n## Path\n\n`string | string[] | Record`\n\nThe 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.\n\n- 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.\n- You can access the form's values without the `values.` prefix, ya! it's a shortcut for for your convenience.\n\n```js\n// Getting a value\nconst foo = useFormState(\"values.foo\");\n\n// Shortcut for getting a value\nconst foo = useFormState(\"foo\");\n\n// Array pick\nconst [foo, bar] = useFormState([\"values.foo\", \"values.bar\"]);\n\n// Object pick\nconst { foo, bar } = useFormState({ foo: \"values.foo\", bar: \"values.bar\" });\n```\n\n## Config\n\nAn `object` with the following options:\n\n### formId\n\n`string`\n\nThe [corresponding ID](./use-form#id) of the `useForm` hook. We only need it when using multiple form hooks at the same time.\n\n### defaultValues\n\n`FormValues`\n\nThe 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:\n\n- Setting a default value for a field via the `defaultValue` attribute.\n- Setting a default value for a field via the `useControlled`'s [defaultValue option](./use-controlled#defaultvalue).\n\n### errorWithTouched\n\n`boolean`\n\nEnable/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`.\n\n```js\n// Current state: { errors: { foo: \"Required\" }, touched: {} }\n// Returns { foo: \"Required\" }\nconst errors = useFormState(\"errors\");\n\n// Current state: { errors: { foo: \"Required\" }, touched: {} }\n// Returns {}\nconst errors = useFormState(\"errors\", { errorWithTouched: true );\n\n// Current state: { errors: { foo: \"Required\" }, touched: { foo: true } }\n// Returns { foo: \"Required\" }\nconst errors = useFormState(\"errors\", { errorWithTouched: true );\n```\n\n## Callback\n\n`(props: any) => void`\n\nIt'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.\n\n## FormId\n\n`string`\n\nAn optional parameter that works the same as the [config.formId](#formid).\n\n## Example\n\nThe example demonstrates the basic usage of this hook.\n\n```js\nimport { useFormState } from \"react-cool-form\";\n\n// To isolate re-rendering at the component level\nconst IsolatedComponent = () => {\n const foo = useFormState(\"foo\");\n\n return
{foo}
;\n};\n\n// To listen for the changes of a field value\nuseFormState(\"foo\", (foo) => console.log(foo));\n```\n"
},
{
"path": "docs/api-reference/use-form.md",
"content": "---\nid: use-form\ntitle: useForm\n---\n\nThis 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.\n\n```js\nconst methods = useForm(config);\n```\n\n## Config\n\nAn `object` with the following options:\n\n### id\n\n`string`\n\nThe 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.\n\n### defaultValues\n\n`Record`\n\nDefault 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`.\n\n- 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.\n\n### excludeFields\n\n`string[]`\n\nTell 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.\n\n- The `excludeFields` and `data-rcf-exclude` won't affect the functionality of the [useControlled](./use-controlled).\n\n```js {3,12}\nconst App = () => {\n const { form } = useForm({\n excludeFields: [\"foo\", \"#bar\", \".baz\"],\n });\n\n return (\n \n );\n};\n```\n\n👉🏻 See the [Exclude Fields](../getting-started/integration-an-existing-form#exclude-fields) to learn more.\n\n### builtInValidationMode\n\n`\"message\" | \"state\" | false`\n\nWe can configure the [mode of the built-in validation](../getting-started/validation-guide#displaying-error-messages) as follows:\n\n- `\"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)\n- `\"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)\n- `false`: Disable the [built-in validation](../getting-started/validation-guide#built-in-validation)\n\n### validateOnChange\n\n`boolean`\n\nTell React Cool Form to run validations on `change` events as well as the [setValue](#setvalue) method. Default is `true`.\n\n### validateOnBlur\n\n`boolean`\n\nTell React Cool Form to run validations on `blur` events. Default is `true`.\n\n### focusOnError\n\n`boolean | string[] | (names: string[]) => string[]`\n\nTell React Cool Form to apply focus to the first field with an error upon an attempted form submission. Default is `true`.\n\n- Only native input elements that support [HTMLElement.focus()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus) will work.\n- The focus order is based on the field order (i.e. top-to-bottom and left-to-right).\n\n```js\n// Current fields: { foo: \"\", bar: \"\", baz: \"\" }\n\n// Disable this feature\nconst methods = useForm({ focusOnError: false });\n\n// Change the focus order by passing in field names\nconst methods = useForm({ focusOnError: [\"bar\", \"foo\", \"baz\"] });\n\n// Change the focus order by modifying existing field names\nconst methods = useForm({\n focusOnError: (names) => {\n [names[0], names[1]] = [names[1], names[0]];\n return names;\n },\n});\n```\n\n### removeOnUnmounted\n\n`boolean | string[] | (names: string[]) => string[]`\n\nBy 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`.\n\n- To keep a default value existing between a dynamically show/hide field, we can set it via `defaultValue` attribute or option.\n- If this feature doesn't meet your needs, you can use the [removeField](#removefield) to control what data that you want to remove instead.\n\n```js\n// Current values: { foo: \"🍎\", bar: \"🍋\", baz: \"🥝\" }\n\n// Keep all the data\nconst methods = useForm({ removeOnUnmounted: false });\n\n// Keep partial data (i.e. \"bar\" and \"baz\") by passing in field names\nconst methods = useForm({ removeOnUnmounted: [\"foo\"] });\n\n// Keep partial data (i.e. \"bar\" and \"baz\") by modifying existing field names\nconst methods = useForm({\n removeOnUnmounted: (names) => names.filter((name) => name === \"foo\"),\n});\n```\n\n👉🏻 See the [conditional fields](../examples/conditional-fields) example to learn more.\n\n### validate\n\n`(values: FormValues) => FormErrors | false | void | Promise`\n\nA 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.\n\n### onSubmit\n\n`(values: FormValues, options: Object, e?: Event) => void | Promise`\n\nThe 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:\n\n```js\nconst methods = useForm({\n onSubmit: async (\n values,\n {\n getState,\n setValue,\n setTouched,\n setDirty,\n setError,\n focus,\n runValidation,\n removeField,\n submit,\n reset,\n },\n e\n ) => {\n /* Do something... */\n },\n});\n```\n\n👉🏻 See the [Form Submission](../getting-started/form-submission) to learn more.\n\n### onError\n\n`(errors: FormErrors, options: Object, e?: Event) => void`\n\nThe 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:\n\n```js\nconst methods = useForm({\n onError: (\n errors,\n {\n getState,\n setValue,\n setTouched,\n setDirty,\n setError,\n focus,\n runValidation,\n removeField,\n submit,\n reset,\n },\n e\n ) => {\n /* Do something... */\n },\n});\n```\n\n👉🏻 See the [Form Submission](../getting-started/form-submission) to learn more.\n\n### onReset\n\n`(values: FormValues, options: Object, e?: Event) => void`\n\nThe form reset handler that is called when the form is reset (or when the [reset](#reset) method is called). It takes the following parameters:\n\n```js\nconst methods = useForm({\n onReset: (\n values,\n {\n getState,\n setValue,\n setTouched,\n setDirty,\n setError,\n focus,\n runValidation,\n removeField,\n submit,\n reset,\n },\n e\n ) => {\n /* Do something... */\n },\n});\n```\n\n👉🏻 See the [Reset Form](../getting-started/reset-form) to learn more.\n\n### onStateChange\n\n`(formState: FormState) => void`\n\nThe form state change handler that is called on every state change. It's useful for **debugging** or **triggering a handler**.\n\n- Want to trigger a handler based on certain properties in the form state? Check out the [useFormState](./use-form-state) to learn more.\n- `formState` is readonly and should not be mutated directly.\n\n```js\nconst methods = useForm({\n onStateChange: (formState) => console.log(\"State: \", formState),\n});\n```\n\n## Methods\n\nAn `object` with the following methods:\n\n### form\n\n`(element: HTMLElement) => void`\n\nThis 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.\n\n### field\n\n`(validateOrOptions: Function | Object) => Function`\n\nThis 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.\n\n- For your convenience, the values of `` and `` are converted to `number` by default.\n- When using this method with the [useControlled](./use-controlled), the functionality of the method will be replaced.\n\n```js\nconst { field } = useForm();\n\n !value.length && \"Required\",\n valueAsNumber: true, // (Default = false) Returns a number representing the field's value if applicable, otherwise, returns \"NaN\"\n valueAsDate: true, // (Default = false) Returns a Date object representing the field's value if applicable, otherwise, returns \"null\"\n parse: (value) => customParser(value), // Returns whatever value you want through the callback\n })}\n/>;\n```\n\nIf you just want to validate the field, there's a shortcut for it:\n\n```js\n !value.length && \"Required\")} />\n```\n\n### focus\n\n`(name: string, delay?: number) => void`\n\nThis 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.\n\n:::note\nWhen 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.\n:::\n\n```js {7,12}\nconst App = () => {\n const { form, focus } = useForm();\n\n useEffect(() => {\n // Will focuses on the first field after 0.5 second\n // It works the same as `focus(\"foo.a\", 500)`\n focus(\"foo\", 500);\n }, []);\n\n return (\n \n );\n};\n```\n\n👉🏻 See the [Applying Focus](../getting-started/arrays-and-lists#applying-focus) to learn more.\n\n### use\n\n`(path: string | string[] | Record, options?: Object) => any`\n\nThis 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.\n\n### getState\n\n`(path?: string | string[] | Record) => any`\n\nThis 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.\n\n### setValue\n\n`(name: string, value: any | Function, options?: Object) => void`\n\nThis method allows us to manually set/clear the value of a field. Useful for creating custom field change handlers.\n\n```js\nconst { setValue } = useForm();\n\nsetValue(\"fieldName\", \"value\", {\n shouldValidate: true, // (Default = \"validateOnChange\" option) Triggers field validation\n shouldTouched: true, // (Default = true) Sets the field as touched\n shouldDirty: true, // (Default = true) Sets the field as dirty\n});\n\n// We can also pass a callback as the \"value\" parameter, similar to React's setState callback style\nsetValue(\"fieldName\", (prevValue) => prevValue.splice(2, 0, \"🍎\"));\n```\n\nWe can clear the value of a field by the following way:\n\n```js\nsetValue(\"fieldName\", undefined); // The field will be unset: { fieldName: \"value\" } → {}\n```\n\n### setTouched\n\n`(name: string, isTouched?: boolean, options?: Object) => void`\n\nThis method allows us to manually set/clear the touched of a field. Useful for creating custom field touched handlers.\n\n```js\nconst { setTouched } = useForm();\n\n// Common use case\nsetTouched(\"fieldName\");\n\n// Full parameters\nsetTouched(\n \"fieldName\",\n true, // (Default = true) Sets the field as touched\n {\n shouldValidate: true, // (Default = \"validateOnBlur\" option) Triggers field validation\n }\n);\n```\n\nWe can clear the touched of a field by the following way:\n\n```js\nsetTouched(\"fieldName\", false); // The touched will be unset: { fieldName: true } → {}\n```\n\n### setDirty\n\n`(name: string, isDirty?: boolean) => void`\n\nThis method allows us to manually set/clear the dirty of a field. Useful for creating custom field dirty handlers.\n\n```js\nconst { setDirty } = useForm();\n\n// Common use case\nsetDirty(\"fieldName\");\n```\n\nWe can clear the dirty of a field by the following way:\n\n```js\nsetDirty(\"fieldName\", false); // The dirty will be unset: { fieldName: true } → {}\n```\n\n### setError\n\n`(name: string, error: any | Function) => void`\n\nThis method allows us to manually set/clear the error of a field. Useful for creating custom field error handlers.\n\n```js\nconst { setError } = useForm();\n\nsetError(\"fieldName\", \"Required\");\n\n// We can also pass a callback as the \"error\" parameter, similar to React's setState callback style\nsetError(\"fieldName\", (prevError) => (prevError ? \"Too short\" : \"Required\"));\n```\n\nWe can clear the error of a field by the following way (or using [clearErrors](#clearerrors)):\n\n```js\nsetError(\"fieldName\", undefined); // Or any falsy values, the error will be unset: { fieldName: \"Required\" } → {}\n```\n\n### clearErrors\n\n`(name?: string | string[]) => void`\n\nThis method allows us to manually clear errors (or an error). Useful for creating custom field error handlers.\n\n```js\nconst { clearErrors } = useForm();\n\n// Current errors: { foo: { bar: \"Required\", baz: \"Required\" }, qux: \"Required\" }\n\nclearErrors(); // Clears all errors. Result: {}\n\nclearErrors(\"foo\"); // Clears both \"foo.bar\" and \"foo.baz\". Result: { qux: \"Required\" }\n\nclearErrors([\"foo.bar\", \"foo.baz\"]); // Clears \"foo.bar\" and \"foo.baz\" respectively. Result: { foo: {}, qux: \"Required\" }\n```\n\n### runValidation\n\n`(name?: string | string[], options?: Object) => Promise`\n\nThis method allows us to manually run validation for the form or field(s).\n\n- It returns a `boolean` that indicates the validation results, `true` means valid, `false` otherwise.\n- 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.\n\n```js\nconst { runValidation } = useForm();\n\n// Validates the form (i.e. all the fields)\nrunValidation();\n\n// Validates single field\nrunValidation(\"fieldName\");\n\n// Validates multiple fields\nrunValidation([\"fieldName1\", \"fieldName2\"]);\n\n// With result\nconst validateForm = async () => {\n const isValid = await runValidation();\n console.log(\"The form is: \", isValid ? \"valid\" : \"invalid\");\n};\n\n// Full parameters\nrunValidation(\"fieldName\", {\n shouldFocus: true, // (Default = \"focusOnError\" option) To focus to the first field with an error within the specified fields\n});\n```\n\n👉🏻 See the [Validation Guide](../getting-started/validation-guide) to learn more.\n\n### removeField\n\n`(name: string, exclude?: string[]) => void`\n\nThis 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.\n\n- 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.\n\n```js {4,10}\nconst App = () => {\n const [show, setShow] = useState(true);\n const { form, removeField } = useForm({\n removeOnUnmounted: false, // Disable the feature of automatically removing fields\n });\n\n const handleToggle = () => {\n setShow(!show);\n // We can exclude these data: [\"defaultValue\", \"value\", \"error\", \"touched\", \"dirty\"]\n if (!show) removeField(\"foo\", [\"defaultValue\"]); // Keep the default value\n };\n\n return (\n \n );\n};\n```\n\n### submit\n\n`(e?: Event) => Promise`\n\nThis method allows us to manually submit the form, it returns a promise with the following results. Useful for meeting the needs of custom design.\n\n- Returns a promise with `errors` when any validation errors\n- Returns a promise with `values` when the form is validated successfully\n\n```js\nconst { submit } = useForm({\n onSubmit: (values, options, e) => console.log(\"onSubmit: \", values), // Triggered on form submit + valid\n onError: (errors, options, e) => console.log(\"onError: \", errors), // Triggered on form submit + invalid\n});\n\nconst handleFormSubmit = async (e) => {\n const { errors, values } = await submit(e); // Pass the event object to the event handlers\n\n if (errors) {\n // Do something for invalid case\n } else {\n // Do something for valid case\n }\n};\n```\n\n👉🏻 See the [Form Submission](../getting-started/form-submission) to learn more.\n\n### reset\n\n`(values?: FormValues | Function | null, exclude?: string[] | null, e?: Event) => void`\n\nThis 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).\n\n- We can pass `values` as an optional parameter to update the default values.\n- We can pass `exclude` as an optional parameter to prevent specific [state](../getting-started/form-state#about-the-form-state) from reset.\n\n```js\nconst { reset } = useForm({\n defaultValues: { firstName: \"\", lastName: \"\" },\n onReset: (values, options, e) => console.log(\"onReset: \", values), // Triggered on form reset\n});\n\nconst handleFormReset = (e) => {\n reset(\n { firstName: \"Welly\", lastName: \"Shen\" }, // Update the default values\n [\"isSubmitted\", \"submitCount\"], // Don't reset the \"isSubmitted\" and \"submitCount\" state\n e // Pass the event object to the \"onReset\" handler\n );\n\n // We can also pass a callback as the \"values\" parameter, similar to React's setState callback style\n reset((prevValues) => ({ ...prevValues, firstName: \"Bella\" }));\n};\n```\n\n👉🏻 See the [Reset Form](../getting-started/reset-form) to learn more.\n"
},
{
"path": "docs/api-reference/utility-functions.md",
"content": "---\nid: utility-functions\ntitle: Utility Functions\n---\n\nReact Cool Form exports useful utility functions that can help you handle [complex structures](../getting-started/complex-structures) efficiently.\n\n```js\nimport { get, set, unset } from \"react-cool-form\";\n```\n\n## get\n\n`(object: Record, path: string, defaultValue?: unknown) => any`\n\nGets the value at path of object. If the resolved value is `undefined`, the `defaultValue` is returned in its place.\n\n```js {8}\nimport { useForm, get } from \"react-cool-form\";\n\nconst { form } = useForm({\n defaultValues: { foo: { bar: { baz: \"\" } } },\n validate: (values) => {\n const errors = {};\n\n if (!get(values, \"foo.bar.baz\", \"\")) errors.foo.bar.baz = \"Required\";\n\n return errors;\n },\n\n // ...\n});\n```\n\n## set\n\n`(object: Record, path: string, value: unknown, immutable?: boolean) => any`\n\nSets 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.\n\n```js {10,12}\nimport { useForm, set } from \"react-cool-form\";\n\nconst { form } = useForm({\n defaultValues: { foo: { bar: { baz: \"\" } } },\n validate: (values) => {\n const errors = {};\n\n if (!values.foo.bar.baz) {\n // Mutable way\n set(errors, \"foo.bar.baz\", \"Required\");\n // Immutable way\n errors = set(errors, \"foo.bar.baz\", \"Required\", true);\n }\n\n return errors;\n },\n\n // ...\n});\n```\n\n## unset\n\n`(object: Record, path: string, immutable?: boolean) => any`\n\nRemoves the property at `path` of `object`.\n\n- If the property remains empty, the parent properties will be removed as well.\n- It will clear the redundant `empty` or `undefined` element(s) of an array.\n\n```js {12,14}\nimport { useForm, unset } from \"react-cool-form\";\n\nconst { form } = useForm({\n defaultValues: { foo: { bar: { baz: \"\" } } },\n validate: (values) => {\n const errors = {};\n\n if (!values.foo.bar.baz) {\n // ...\n } else {\n // Mutable way\n unset(errors, \"foo.bar.baz\");\n // Immutable way\n errors = unset(errors, \"foo.bar.baz\", true);\n }\n\n return errors;\n },\n\n // ...\n});\n```\n"
},
{
"path": "docs/examples/arrays-and-lists.md",
"content": "---\nid: arrays-and-lists\ntitle: Arrays and Lists\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to work with array fields in React Cool Form.\n\n\n"
},
{
"path": "docs/examples/basic.md",
"content": "---\nid: basic\ntitle: Basic\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to use form inputs (input, select, and textarea) to build a form with no validation.\n\n\n"
},
{
"path": "docs/examples/built-in-validation.md",
"content": "---\nid: built-in-validation\ntitle: Built-in Validation\nhide_table_of_contents: true\n---\n\nThis 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.\n\n\n"
},
{
"path": "docs/examples/checkboxes.md",
"content": "---\nid: checkboxes\ntitle: Checkboxes\nhide_table_of_contents: true\n---\n\nThis 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.\n\n\n"
},
{
"path": "docs/examples/complex-strcutures.md",
"content": "---\nid: complex-structures\ntitle: Complex Structures\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to handle [Complex Structures](../getting-started/complex-structures) in React Cool Form.\n\n\n"
},
{
"path": "docs/examples/conditional-fields.md",
"content": "---\nid: conditional-fields\ntitle: Conditional Fields\nhide_table_of_contents: true\n---\n\nBy 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:\n\n\n"
},
{
"path": "docs/examples/custom-field.md",
"content": "---\nid: custom-field\ntitle: Custom Field\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to combine the [useFormState](../api-reference/use-form-state) and [useFormMethods](../api-reference/use-form-methods) to DIY a custom field.\n\n\n"
},
{
"path": "docs/examples/field-level-validation.md",
"content": "---\nid: field-level-validation\ntitle: Field-level Validation\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to validate a form by the [field](../api-reference/use-form#field) method of React Cool Form.\n\n\n"
},
{
"path": "docs/examples/form-level-validation.md",
"content": "---\nid: form-level-validation\ntitle: Form-level Validation\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to validate a form by the [validate](../api-reference/use-form#validate) option of React Cool Form.\n\n\n"
},
{
"path": "docs/examples/form-submission.md",
"content": "---\nid: form-submission\ntitle: Form Submission\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to submit a form in React Cool Form.\n\n\n"
},
{
"path": "docs/examples/isolating-rerendering.md",
"content": "---\nid: isolating-rerendering\ntitle: Isolating Re-rendering\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to isolate re-rendering at the component level via the [useFormState](../api-reference/use-form-state) hook.\n\n\n"
},
{
"path": "docs/examples/lazy-default-values.md",
"content": "---\nid: lazy-default-values\ntitle: Lazy Default Values\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to set [defaultValues](../api-reference/use-form#defaultvalues) lazily.\n\n\n"
},
{
"path": "docs/examples/material-ui.md",
"content": "---\nid: material-ui\ntitle: Material-UI\nhide_table_of_contents: true\n---\n\nThis example demonstrates the easiest way to integrate [Material-UI](https://material-ui.com) with your form that you have never seen 😎.\n\n\n"
},
{
"path": "docs/examples/multi-select.md",
"content": "---\nid: multi-select\ntitle: Multi-select\nhide_table_of_contents: true\n---\n\nThis 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.\n\n\n"
},
{
"path": "docs/examples/radio-group.md",
"content": "---\nid: radio-group\ntitle: Radio Group\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to use React Cool Form with a radio group.\n\n\n"
},
{
"path": "docs/examples/react-select.md",
"content": "---\nid: react-select\ntitle: React Select\nhide_table_of_contents: true\n---\n\nThis 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.\n\n\n"
},
{
"path": "docs/examples/reset-form.md",
"content": "---\nid: reset-form\ntitle: Reset Form\nhide_table_of_contents: true\n---\n\nThis example demonstrates how to reset a form in React Cool Form.\n\n\n"
},
{
"path": "docs/examples/validation-with-schema.md",
"content": "---\nid: validation-with-schema\ntitle: Validation with Schema\nhide_table_of_contents: true\n---\n\nThis 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)).\n\n\n"
},
{
"path": "docs/examples/virtualized-lists.md",
"content": "---\nid: virtualized-lists\ntitle: Virtualized Lists\nhide_table_of_contents: true\n---\n\nWhen 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.\n\n\n"
},
{
"path": "docs/examples/without-form-element.md",
"content": "---\nid: without-form-element\ntitle: Without \n );\n};\n```\n\n## 2. [useControlled Hook](../api-reference/use-controlled)\n\n[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.\n\n:::note\nWhen using the hook (and not working with [field-array](./arrays-and-lists#dealing-with-array-fields)), a default value is required.\n:::\n\n[](https://codesandbox.io/s/rcf-react-select-djsl1?fontsize=14&hidenavigation=1&theme=dark)\n\n```js\nimport { useForm, useControlled } from \"react-cool-form\";\nimport Select from \"react-select\";\n\nconst Field = ({ as, name, ...restProps }) => {\n const [fieldProps] = useControlled(name, restProps);\n const Component = as;\n\n return ;\n};\n\nconst options = [\n { label: \"React\", value: \"react\" },\n { label: \"Vue\", value: \"vue\" },\n { label: \"Angular\", value: \"angular\" },\n { label: \"Svelte\", value: \"svelte\" },\n];\n\nconst App = () => {\n const { form } = useForm({\n defaultValues: { framework: \"\" }, // We must provide a default value for the controlled field\n excludeFields: [\"#framework\"], // Exclude the internal input element of React-Select by ID\n onSubmit: (values) => console.log(\"onSubmit: \", values),\n });\n\n return (\n \n );\n};\n```\n\n## 3. Do It Yourself\n\nIf 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.\n\n[](https://codesandbox.io/s/rcf-custom-field-p9lqi?fontsize=14&hidenavigation=1&theme=dark)\n\n```js\nimport { useForm, useFormState, useFormMethods } from \"react-cool-form\";\nimport { TextField, Button } from \"@material-ui/core\";\n\nconst Field = ({ as, name, onChange, onBlur, ...restProps }) => {\n const value = useFormState(`values.${name}`);\n const { setValue, setTouched } = useFormMethods();\n const Component = as;\n\n return (\n {\n setValue(name, e.target.value); // Update the field's value and set it as touched\n if (onChange) onChange(e);\n }}\n onBlur={(e) => {\n setTouched(name); // Set the field as touched for displaying error (if it's not touched)\n if (onBlur) onBlur(e);\n }}\n {...restProps}\n />\n );\n};\n\nconst App = () => {\n const { form, use } = useForm({\n defaultValues: { username: \"\" },\n // excludeFields: [\"username\"], // You can also exclude the field here\n validate: ({ username }) => {\n const errors = {};\n if (!username.length) errors.username = \"Required\";\n return errors;\n },\n onSubmit: (values) => console.log(\"onSubmit: \", values),\n });\n const errors = use(\"errors\");\n\n return (\n \n );\n};\n```\n"
},
{
"path": "docs/getting-started/accessibility.md",
"content": "---\nid: accessibility\ntitle: Accessibility (a11y)\nhide_table_of_contents: true\n---\n\nWeb 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.\n\n- Provide [`
![\"\"/](\"https://avatars.githubusercontent.com/u/21308003?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/4596428?v=4?s=100\")