Repository: jaredpalmer/formik Branch: main Commit: 91475adbf335 Files: 250 Total size: 1.4 MB Directory structure: gitextract_fwjymvec/ ├── .all-contributorsrc ├── .changeset/ │ ├── README.md │ └── config.json ├── .codesandbox/ │ └── ci.json ├── .eslintrc.js ├── .github/ │ ├── CODEOWNERS │ ├── CODE_OF_CONDUCT.md │ ├── CONTRIBUTING.md │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── 1.Bug-report.md │ │ ├── 2.Feature-request.md │ │ └── config.yml │ └── workflows/ │ ├── ci.yml │ ├── release.yml │ └── stale.yml ├── .gitignore ├── .kodiak.toml ├── .nvmrc ├── .prettierrc ├── .vscode/ │ └── settings.json ├── LICENSE ├── SECURITY.md ├── app/ │ ├── .gitignore │ ├── README.md │ ├── next-env.d.ts │ ├── package.json │ ├── pages/ │ │ ├── _app.js │ │ ├── basic.js │ │ ├── index.tsx │ │ └── sign-in.js │ ├── styles/ │ │ └── globals.css │ └── tsconfig.json ├── docs/ │ ├── 3rd-party-bindings.md │ ├── api/ │ │ ├── connect.md │ │ ├── errormessage.md │ │ ├── fastfield.md │ │ ├── field.md │ │ ├── fieldarray.md │ │ ├── form.md │ │ ├── formik.md │ │ ├── useField.md │ │ ├── useFormik.md │ │ ├── useFormikContext.md │ │ ├── utils.md │ │ └── withFormik.md │ ├── examples/ │ │ ├── async-submission.md │ │ ├── basic.md │ │ ├── checkboxes.md │ │ ├── dependent-fields-async-api-request.md │ │ ├── dependent-fields.md │ │ ├── field-arrays.md │ │ ├── instant-feedback.md │ │ ├── more-examples.md │ │ ├── radio-group.md │ │ ├── typescript.md │ │ └── with-material-ui.md │ ├── examples.md │ ├── guides/ │ │ ├── arrays.md │ │ ├── form-submission.md │ │ ├── react-native.md │ │ ├── typescript.md │ │ └── validation.md │ ├── manifest.json │ ├── migrating-v2.md │ ├── overview.md │ ├── resources.md │ └── tutorial.md ├── e2e/ │ └── basic.test.ts ├── examples/ │ ├── AsyncValidation.js │ ├── CombinedValidations.js │ ├── CustomInputs.js │ ├── DebouncedAutoSave.js │ ├── Debug.js │ ├── ErrorMessage.js │ ├── FastField.js │ ├── MultistepWizard.js │ ├── RoutedMultistepWizard.js │ ├── RoutedMultistepWizard2.js │ ├── SchemaValidation.js │ ├── SyncValidation.js │ ├── ValidateFieldWithSchema.js │ ├── async-submission/ │ │ ├── README.md │ │ ├── index.js │ │ └── package.json │ ├── basic/ │ │ ├── README.md │ │ ├── index.js │ │ └── package.json │ ├── basic-typescript/ │ │ ├── README.md │ │ ├── index.html │ │ ├── index.tsx │ │ ├── package.json │ │ └── tsconfig.json │ ├── checkboxes/ │ │ ├── README.md │ │ ├── index.js │ │ └── package.json │ ├── dependent-fields/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── styles.css │ ├── dependent-fields-async-api-request/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── styles.css │ ├── field-arrays/ │ │ ├── README.md │ │ ├── index.js │ │ └── package.json │ ├── field-level-validation/ │ │ ├── README.md │ │ ├── index.js │ │ └── package.json │ ├── instant-feedback/ │ │ ├── README.md │ │ ├── index.js │ │ ├── package.json │ │ └── styles.css │ ├── radio-group/ │ │ ├── README.md │ │ ├── index.js │ │ └── package.json │ ├── with-material-ui/ │ │ ├── README.md │ │ ├── index.js │ │ └── package.json │ └── withFormik.js ├── package.json ├── packages/ │ ├── formik/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── MIGRATING-v2.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── ErrorMessage.tsx │ │ │ ├── FastField.tsx │ │ │ ├── Field.tsx │ │ │ ├── FieldArray.tsx │ │ │ ├── Form.tsx │ │ │ ├── Formik.tsx │ │ │ ├── FormikContext.tsx │ │ │ ├── connect.tsx │ │ │ ├── index.tsx │ │ │ ├── types.tsx │ │ │ ├── utils.ts │ │ │ └── withFormik.tsx │ │ ├── test/ │ │ │ ├── ErrorMessage.test.tsx │ │ │ ├── Field.test.tsx │ │ │ ├── FieldArray.test.tsx │ │ │ ├── Formik.test.tsx │ │ │ ├── setupTests.ts │ │ │ ├── testHelpers.ts │ │ │ ├── tsconfig.json │ │ │ ├── types.test.tsx │ │ │ ├── utils.test.tsx │ │ │ ├── withFormik.test.tsx │ │ │ └── yupHelpers.test.ts │ │ ├── tsconfig.build.json │ │ └── types/ │ │ ├── global.d.ts │ │ └── index.d.ts │ └── formik-native/ │ ├── .gitignore │ ├── CHANGELOG.md │ ├── CONTRIBUTING.md │ ├── README.md │ ├── package.json │ ├── src/ │ │ └── index.ts │ ├── test/ │ │ └── blah.test.ts │ └── tsconfig.build.json ├── playwright.config.ts ├── scripts/ │ ├── benchmark.tsx │ ├── btag.sh │ └── retag.sh ├── tsconfig.base.json ├── tsconfig.json ├── turbo.json ├── website/ │ ├── .eslintignore │ ├── .eslintrc │ ├── .gitignore │ ├── .prettierignore │ ├── README.md │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── postcss.config.js │ ├── public/ │ │ └── robots.txt │ ├── scripts/ │ │ └── build-sitemap.js │ ├── src/ │ │ ├── blog/ │ │ │ ├── formik-3-alpha.md │ │ │ └── new-docs.md │ │ ├── components/ │ │ │ ├── ArrowRight.tsx │ │ │ ├── Banner.tsx │ │ │ ├── Container.tsx │ │ │ ├── DocsPageFooter.tsx │ │ │ ├── ExternalLink.tsx │ │ │ ├── Footer.tsx │ │ │ ├── FormiumLogo.tsx │ │ │ ├── Highlight2.tsx │ │ │ ├── LayoutDocs.tsx │ │ │ ├── Logo.tsx │ │ │ ├── MDXComponents.tsx │ │ │ ├── Nav.tsx │ │ │ ├── ReactionForm.tsx │ │ │ ├── Search.tsx │ │ │ ├── Seo.tsx │ │ │ ├── Sidebar.tsx │ │ │ ├── SidebarCategory.tsx │ │ │ ├── SidebarHeading.tsx │ │ │ ├── SidebarMobile.tsx │ │ │ ├── SidebarNavLink.tsx │ │ │ ├── SidebarPost.tsx │ │ │ ├── Sticky.tsx │ │ │ ├── TWButton.tsx │ │ │ ├── Toc.module.css │ │ │ ├── Toc.tsx │ │ │ ├── addRouterEvents.tsx │ │ │ ├── clients/ │ │ │ │ ├── Client.tsx │ │ │ │ ├── ClientsMarquee.tsx │ │ │ │ └── Filters.tsx │ │ │ ├── forwardRefWithAs.tsx │ │ │ ├── markdown.module.css │ │ │ ├── useBoolean.tsx │ │ │ ├── useClipboard.tsx │ │ │ ├── useIsMobile.tsx │ │ │ ├── useOverScroll.tsx │ │ │ ├── useTocHighlight.tsx │ │ │ └── utils/ │ │ │ └── throttle.ts │ │ ├── index.d.ts │ │ ├── lib/ │ │ │ ├── blog/ │ │ │ │ └── mdxUtils.ts │ │ │ ├── docs/ │ │ │ │ ├── config.ts │ │ │ │ ├── findRouteByPath.tsx │ │ │ │ ├── md-loader.js │ │ │ │ ├── page.tsx │ │ │ │ ├── rehype-docs.js │ │ │ │ ├── remark-paragraph-alerts.js │ │ │ │ ├── remark-plugins.js │ │ │ │ └── utils.ts │ │ │ ├── fs-utils.tsx │ │ │ ├── get-route-context.tsx │ │ │ ├── github/ │ │ │ │ ├── api.tsx │ │ │ │ ├── constants.tsx │ │ │ │ └── raw.tsx │ │ │ └── types.tsx │ │ ├── manifests/ │ │ │ ├── getManifest.ts │ │ │ ├── manifest-1.3.0.json │ │ │ ├── manifest-2.1.4.json │ │ │ └── manifest.json │ │ ├── pages/ │ │ │ ├── _app.js │ │ │ ├── _document.js │ │ │ ├── blog/ │ │ │ │ ├── [slug].tsx │ │ │ │ └── index.tsx │ │ │ ├── docs/ │ │ │ │ └── [...slug].tsx │ │ │ ├── index.tsx │ │ │ └── users.tsx │ │ ├── siteConfig.tsx │ │ ├── styles/ │ │ │ └── index.css │ │ └── users.ts │ ├── tailwind.config.js │ └── tsconfig.json └── yarn.lock ================================================ FILE CONTENTS ================================================ ================================================ FILE: .all-contributorsrc ================================================ { "projectName": "formik", "projectOwner": "jaredpalmer", "files": [ "packages/formik/README.md" ], "imageSize": 100, "commit": true, "contributors": [ { "login": "jaredpalmer", "name": "Jared Palmer", "avatar_url": "https://avatars2.githubusercontent.com/u/4060187?v=4", "profile": "http://jaredpalmer.com", "contributions": [ "question", "code", "design", "doc", "example", "ideas", "review", "test" ] }, { "login": "eonwhite", "name": "Ian White", "avatar_url": "https://avatars0.githubusercontent.com/u/109324?v=4", "profile": "https://www.stardog.io", "contributions": [ "question", "bug", "code", "doc", "ideas", "review" ] }, { "login": "Andreyco", "name": "Andrej Badin", "avatar_url": "https://avatars0.githubusercontent.com/u/829963?v=4", "profile": "http://andrejbadin.com", "contributions": [ "question", "bug", "doc" ] }, { "login": "skattyadz", "name": "Adam Howard", "avatar_url": "https://avatars2.githubusercontent.com/u/91115?v=4", "profile": "http://adz.co.de", "contributions": [ "question", "bug", "ideas", "review" ] }, { "login": "VladShcherbin", "name": "Vlad Shcherbin", "avatar_url": "https://avatars1.githubusercontent.com/u/6711845?v=4", "profile": "https://github.com/VladShcherbin", "contributions": [ "question", "bug", "ideas" ] }, { "login": "brikou", "name": "Brikou CARRE", "avatar_url": "https://avatars3.githubusercontent.com/u/383212?v=4", "profile": "https://github.com/brikou", "contributions": [ "bug", "doc" ] }, { "login": "skvale", "name": "Sam Kvale", "avatar_url": "https://avatars0.githubusercontent.com/u/5314713?v=4", "profile": "http://skvale.github.io", "contributions": [ "bug", "code", "test" ] }, { "login": "jontansey", "name": "Jon Tansey", "avatar_url": "https://avatars0.githubusercontent.com/u/13765558?v=4", "profile": "http://jon.tansey.info", "contributions": [ "bug", "code" ] }, { "login": "slightlytyler", "name": "Tyler Martinez", "avatar_url": "https://avatars0.githubusercontent.com/u/6819171?v=4", "profile": "http://slightlytyler.com", "contributions": [ "bug", "doc" ] }, { "login": "MrLoh", "name": "Tobias Lohse", "avatar_url": "https://avatars0.githubusercontent.com/u/1285032?v=4", "profile": "http://MrLoh.se", "contributions": [ "bug", "code" ] }, { "login": "quantizor", "name": "Evan Jacobs", "avatar_url": "https://avatars.githubusercontent.com/u/570070?v=4", "profile": "https://quantizor.dev", "contributions": [ "question", "code", "design", "doc", "example", "ideas", "review", "test" ] } ], "repoType": "github" } ================================================ 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.3.0/schema.json", "changelog": ["@changesets/changelog-github", { "repo": "formium/formik" }], "commit": false, "linked": [], "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", "ignore": [] } ================================================ FILE: .codesandbox/ci.json ================================================ { "buildCommand": "build:codesandbox", "node": "18", "packages": ["packages/formik", "packages/formik-native"], "sandboxes": ["n4sgkx"] } ================================================ FILE: .eslintrc.js ================================================ module.exports = { extends: [ 'react-app', 'prettier/@typescript-eslint', 'plugin:prettier/recommended', ], settings: { react: { version: 'detect', }, }, }; ================================================ FILE: .github/CODEOWNERS ================================================ # Learn how to add code owners here: # https://help.github.com/en/articles/about-code-owners * @jaredpalmer @quantizor /docs/ @jaredpalmer @quantizor /examples/ @jaredpalmer @quantizor ================================================ FILE: .github/CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: * Using welcoming and inclusive language * Being respectful of differing viewpoints and experiences * Gracefully accepting constructive criticism * Focusing on what is best for the community * Showing empathy towards other community members Examples of unacceptable behavior by participants include: * The use of sexualized language or imagery and unwelcome sexual attention or advances * Trolling, insulting/derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or electronic address, without explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers 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, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at jared@palmer.net. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org [version]: http://contributor-covenant.org/version/1/4/ ================================================ FILE: .github/CONTRIBUTING.md ================================================ # Contributing to Formik **Table of Contents** - [Code of Conduct](#code-of-conduct) - [Ways to Contribute](#ways-to-contribute) - [Working on your first Pull Request?](#working-on-your-first-pull-request) - [Sending a Pull Request](#sending-a-pull-request) - [Working locally](#working-locally) - [Develop](#develop) - [Test](#test) - [How to increase the chance of a change being accepted?](#how-to-increase-the-chance-of-a-change-being-accepted) - [Working locally](#working-locally-1) - [Watching / Building packages](#watching--building-packages) - [Unit testing](#unit-testing) - [Playground / Integration testing](#playground--integration-testing) ## Code of Conduct Formik has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it. Please read [the full text](/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated. ## Ways to Contribute There are many ways to contribute to Formik, code contribution is one aspect of it. - **Spread the word** - Evangelize Formik by linking to https://formik.org on your website, every backlink matters. Follow us on [Twitter](https://twitter.com/formiumhq), like and retweet the important news. Or just talk about us with your friends. - **Give us feedback.** Tell us what we're doing well or where we can improve. Please upvote (👍) the issues that you are the most interested in seeing solved. - **Help new users.** You can answer questions on StackOverflow or GitHub Discussions - **Make changes happen.** Suggest changes to the documentation or code. - **Write guides** If you come with a cool workflow, write about and we'll feature it in the blog or on the resources page - **Report bugs** or missing features by creating an issue. - **Review and comment** on existing pull requests and issues. ## Working on your first Pull Request? You can learn how from this free video series: [How to Contribute to a Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/formium/formik/issues?q=is:open+is:issue+label:"good+first+issue") that contain changes that have a relatively limited scope. This label means that there is already a working solution to the issue in the discussion section. Therefore, it is a great place to get started. If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you have started to work on it so other people don't accidentally duplicate your effort. If somebody claims an issue but doesn't follow up for more than a week, it's fine to take it over but you should still leave a comment. If there has been no activity on the issue for 7 to 14 days, it is safe to assume that nobody is working on it. ## Sending a Pull Request Formik is a community project, so [Pull Requests](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request) are always welcome, but, before working on a large change, it is best to open an issue first to discuss it with the maintainers. When in doubt, keep your Pull Requests small. To give a Pull Request the best chance of getting accepted, don't bundle more than one feature or bug fix per Pull Request. It's often best to create two smaller Pull Requests than one big one. 1. [Fork the repository](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo). 2. Clone the fork to your local machine and add upstream remote: ```sh git clone https://github.com//formik.git cd formik git remote add upstream https://github.com/formik/formik.git ``` 3. Synchronize your local `next` branch with the upstream one: ```sh git checkout main git pull upstream main ``` 4. Install the dependencies with [yarn](https://yarnpkg.com) (npm isn't supported): ```sh yarn install ``` 5. Create a new topic branch: ```sh git checkout -b my-topic-branch ``` 6. Make changes, commit and push to your fork: ```sh git push -u origin HEAD ``` 7. Go to [the repository](https://github.com/formium/formik) and [make a Pull Request](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request). The core team is monitoring for Pull Requests. We will review your Pull Request and either merge it, request changes to it, or close it with an explanation. ## Working locally The repo is managed with Lerna, Yarn Workspaces, and TSDX. ### Develop ```shell yarn install yarn dev ``` ### Test Runs jest on all projects ``` yarn test ``` ## How to increase the chance of a change being accepted? The continuous integration service runs a series of checks automatically when a Pull Request is opened. If you're not sure if your changes will pass, you can always open a Pull Request and the GitHub UI will display a summary of the results. If any of them fail, refer to [Checks and how to fix them](#checks-and-how-to-fix-them). Make sure the following is true: - The branch is targeted at `main` for ongoing development. We do our best to keep `main` in good shape, with all tests passing. Code that lands in `main` must be compatible with the latest stable release. It may contain additional features, but no breaking changes. We should be able to release a new minor version from the tip of `main` at any time. - If a feature is being added: - If the result was already achievable with the library, explain why this feature needs to be added. - If this is a common use case, consider adding an example to the documentation. - When adding new features or modifying existing, please include tests to confirm the new behavior. - The branch is not behind its target. (We use https://kodiakhq.com) to try to automate this process for you. Because we will only merge a Pull Request for which all tests pass. The following items need to be correct. We will provide assistance if not: - The code is formatted (run `yarn format`). - The code is linted (run `yarn lint`). - The Pull Request title is written imperatively. See [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/#imperative) for a great explanation) - If you have made a change that impacts semantic versioning, include a [changeset](../.changeset/README.md) by running `yarn changeset` and describing the change you've made. These get rolled together into release notes. ## Working locally ### Watching / Building packages ``` yarn dev ``` ### Unit testing This will run `Jest` unit tests ``` yarn test ``` ### Playground / Integration testing There is a Next.js playground that also serves as the app used for integration tests. What's cool is you can run Formik's build setup, next.js, and playwright all at the same time and everything will just magically "work" and live reload whenever you make a change. This is the suggested development workflow going forward. 1. From the root, open a terminal and run `yarn dev` to start [TSDX](https://tsdx.io) watch on all packages 2. Then start the playground app with `yarn start:app` in another terminal window (it will boot to http://localhost:3000) 3. And finally, you can open a third tab to run playwright - You can use playwright UI using `yarn e2e:ui` - Or, if you'd rather not deal GUI, just run `yarn e2e` ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms github: [jaredpalmer] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] patreon: # Replace with a single Patreon username open_collective: formik 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/1.Bug-report.md ================================================ --- name: Bug report about: Create a bug report for Formik / examples title: '' labels: 'Type: Bug' assignees: '' --- ## Bug report ### Current Behavior ### Expected behavior ### Reproducible example ### Suggested solution(s) ### Additional context ### Your environment | Software | Version(s) | | ---------------- | ---------- | | Formik | | React | | TypeScript | | Browser | | npm/Yarn | | Operating System | ================================================ FILE: .github/ISSUE_TEMPLATE/2.Feature-request.md ================================================ --- name: Feature request about: Request a new feature for Formik title: '' labels: 'Type: Feature Request' assignees: '' --- ## Feature request ### Current Behavior ### Desired Behavior ### Suggested Solution ### Who does this impact? Who is this for? ### Describe alternatives you've considered ### Additional context ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ blank_issues_enabled: false contact_links: - name: Ask a question url: https://github.com/formium/formik/discussions about: Ask questions and discuss with other community members - name: Join the Discord server url: https://discord.gg/pJSg287 about: Chat with other community members in real-time ================================================ FILE: .github/workflows/ci.yml ================================================ name: ci on: pull_request: push: branches: [main] jobs: detectChangedSourceFiles: name: 'determine changes' runs-on: ubuntu-latest outputs: changes: ${{ steps.changed-files-yaml.outputs.any_changed }} steps: - uses: actions/checkout@v4 - name: Detect changed files id: changed-files-yaml uses: tj-actions/changed-files@v45 with: files: | .github/workflows/ci.yml packages/formik/src/** packages/formik/package.json packages/formik-native/src/** packages/formik-native/package.json benchmark: if: always() && needs.detectChangedSourceFiles.outputs.changes == 'true' needs: detectChangedSourceFiles runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: cache: yarn node-version-file: .nvmrc - name: Install & build run: | node --version npm --version yarn --version yarn install --frozen-lockfile yarn build:benchmark - name: Download previous benchmark data uses: actions/cache@v4 with: path: ./benchmark-cache key: ${{ runner.os }}-benchmark - name: Run benchmark run: yarn benchmark - name: Store benchmark result uses: benchmark-action/github-action-benchmark@v1 with: tool: benchmarkjs external-data-json-path: ./benchmark-cache/benchmark-data.json output-file-path: output.txt # comment for PRs that's updated with current perf relative to baseline (main) summary-always: true # warn if slowness is detected; might be transient on rerun alert-threshold: 110% comment-on-alert: true fail-on-alert: true # if things get considerably slower, deny the PR fail-threshold: 120% # needed for commenting on PRs github-token: ${{ secrets.GITHUB_TOKEN }} interaction: needs: detectChangedSourceFiles if: always() && needs.detectChangedSourceFiles.outputs.changes == 'true' timeout-minutes: 10 runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: cache: yarn node-version-file: .nvmrc - name: Install dependencies run: yarn install --frozen-lockfile - name: Get installed Playwright version id: playwright-version run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV - name: Cache playwright binaries uses: actions/cache@v4 id: playwright-cache with: path: | ~/.cache/ms-playwright key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }} - name: Install Playwright Browsers run: yarn playwright install --with-deps if: steps.playwright-cache.outputs.cache-hit != 'true' - run: yarn playwright install-deps if: steps.playwright-cache.outputs.cache-hit != 'true' - name: Run Playwright tests run: yarn playwright test - uses: actions/upload-artifact@v4 if: always() with: name: playwright-report path: playwright-report/ retention-days: 5 size: needs: detectChangedSourceFiles if: always() && needs.detectChangedSourceFiles.outputs.changes == 'true' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 1 - uses: preactjs/compressed-size-action@v2 with: repo-token: '${{ secrets.GITHUB_TOKEN }}' build-script: 'turbo run build --filter {./packages/*}...' unit: needs: detectChangedSourceFiles if: always() && needs.detectChangedSourceFiles.outputs.changes == 'true' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: cache: yarn node-version-file: .nvmrc - name: Install deps, build, and test run: | node --version npm --version yarn --version yarn install --frozen-lockfile yarn test --coverage env: CI: true NODE_OPTIONS: --max-old-space-size=4096 ================================================ FILE: .github/workflows/release.yml ================================================ name: Release on: push: branches: - main - next jobs: release: runs-on: ubuntu-latest if: github.repository == 'jaredpalmer/formik' steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - uses: actions/setup-node@v4 with: cache: yarn node-version-file: .nvmrc - name: Install Dependencies run: yarn install - name: Create Release Pull Request or Publish to npm uses: changesets/action@v1.5.3 with: publish: yarn release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} ================================================ FILE: .github/workflows/stale.yml ================================================ name: "Close stale issues/prs" on: schedule: - cron: "1 0 * * *" jobs: stale: runs-on: ubuntu-latest steps: - uses: actions/stale@v9 with: repo-token: ${{ secrets.GITHUB_TOKEN }} days-before-stale: 30 days-before-close: 60 stale-issue-label: "stale" stale-pr-label: "stale" stale-pr-message: "This pull request is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days" stale-issue-message: "This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days" any-of-labels: "Resolution: Duplicate,Resolution: Invalid,Resolution: Support Redirect,Resolution: Unsolved,Resolution: User Land,Resolution: Wontfix,Resolution: Workaround,Status: Author Feedback,Status: Needs More Information" ================================================ FILE: .gitignore ================================================ dist compiled *.log coverage .DS_Store next.d.ts legacy.d.ts .idea *.orig output.txt node_modules package-lock.json yarn.lock !/docs/yarn.lock !/yarn.lock website/translated_docs website/build !website/yarn.lock website/node_modules website/i18n !website2/yarn.lock .env .vercel /test-results/ /playwright-report/ /playwright/.cache/ # Turborepo cache .turbo ================================================ FILE: .kodiak.toml ================================================ # .kodiak.toml version = 1 [merge] automerge_label = "automerge" require_automerge_label = false method = "squash" delete_branch_on_merge = true optimistic_updates = true prioritize_ready_to_merge = true notify_on_conflict = false [merge.message] title = "pull_request_title" body = "pull_request_body" include_pr_number = true body_type = "markdown" strip_html_comments = true ================================================ FILE: .nvmrc ================================================ v18 ================================================ FILE: .prettierrc ================================================ { "tabWidth": 2, "trailingComma": "es5", "semi": true, "singleQuote": true, "arrowParens": "avoid" } ================================================ FILE: .vscode/settings.json ================================================ { "typescript.tsdk": "node_modules/typescript/lib", "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, } ================================================ FILE: LICENSE ================================================ Apache License Version 2.0, January 2004 https://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS Copyright 2020 Formik, Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at https://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: SECURITY.md ================================================ # Security Policy ## Supported Versions | Version | Supported | | ------- | ------------------ | | 2.x.x | :white_check_mark: | | 1.5.x | :white_check_mark: | | <= 1.4 | :x: | ## Reporting a Vulnerability Send a Twitter DM to [@jaredpalmer](http://twitter.com/@jaredpalmer) or an email to security@jaredpalmer.com ================================================ FILE: app/.gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env.local .env.development.local .env.test.local .env.production.local # vercel .vercel ================================================ FILE: app/README.md ================================================ # Formik Integration Test App This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). ================================================ FILE: app/next-env.d.ts ================================================ /// /// // NOTE: This file should not be edited // see https://nextjs.org/docs/basic-features/typescript for more information. ================================================ FILE: app/package.json ================================================ { "name": "app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "formik": "latest", "next": "^12.0.0", "react": "^17.0.1", "react-dom": "^17.0.1", "yup": "^0.29.3" }, "devDependencies": { "typescript": "^4.0.0" } } ================================================ FILE: app/pages/_app.js ================================================ import React from 'react'; import '../styles/globals.css'; function MyApp({ Component, pageProps }) { return ; } export default MyApp; ================================================ FILE: app/pages/basic.js ================================================ import React from 'react'; import { Formik, Field, Form, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const Basic = () => { const renderCount = React.useRef(0); return (

Sign Up

{ await new Promise(r => setTimeout(r, 500)); alert(JSON.stringify(values, null, 2)); }} >
Checkbox Group
Picked
{renderCount.current++}
); }; export default Basic; ================================================ FILE: app/pages/index.tsx ================================================ import React from 'react'; import Link from 'next/link'; function Home() { return (

Formik Examples and Fixtures

  • Basic
  • Async Submission
); } export default Home; ================================================ FILE: app/pages/sign-in.js ================================================ import React, { useEffect, useState } from 'react'; import { ErrorMessage, Field, Form, FormikProvider, useFormik } from 'formik'; import * as Yup from 'yup'; import { useRouter } from 'next/router'; const SignIn = () => { const router = useRouter(); const [errorLog, setErrorLog] = useState([]); const formik = useFormik({ validateOnMount: router.query.validateOnMount === 'true', validateOnBlur: router.query.validateOnBlur !== 'false', validateOnChange: router.query.validateOnChange !== 'false', initialValues: { username: '', password: '' }, validationSchema: Yup.object().shape({ username: Yup.string().required('Required'), password: Yup.string().required('Required'), }), onSubmit: async values => { await new Promise(r => setTimeout(r, 500)); alert(JSON.stringify(values, null, 2)); }, }); useEffect(() => { if (formik.errors.username && formik.touched.username) { setErrorLog(logs => [ ...logs, { name: 'username', value: formik.values.username, error: formik.errors.username, }, ]); } if (formik.errors.password && formik.touched.password) { setErrorLog(logs => [ ...logs, { name: 'password', value: formik.values.password, error: formik.errors.password, }, ]); } }, [ formik.values.username, formik.errors.username, formik.touched.username, formik.values.password, formik.errors.password, formik.touched.password, ]); return (

Sign In

{JSON.stringify(errorLog, null, 2)}
); }; export default SignIn; ================================================ FILE: app/styles/globals.css ================================================ html, body { padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; } ================================================ FILE: app/tsconfig.json ================================================ { "extends": "../tsconfig.base.json", "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "jsx": "preserve", "allowJs": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "incremental": true }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ], "exclude": [ "node_modules" ] } ================================================ FILE: docs/3rd-party-bindings.md ================================================ --- title: 3rd Party Bindings original_id: 3rd-party-bindings description: Use Formik with popular React component libraries like Material UI, Bootstrap, AntD, Semantic UI, and more. --- If you would like to use Formik with a UI framework, you'll probably want to create a wrapper component that binds Formik's props and callbacks. A few popular frameworks have open source wrappers readily available: - [Ant Design](https://github.com/jannikbuschke/formik-antd) - [Fabric](https://github.com/kmees/formik-office-ui-fabric-react) - [Material UI](https://github.com/stackworx/formik-material-ui) - [Reactstrap](https://github.com/shoaibkhan94/reactstrap-formik) - [Semantic UI 2.0](https://github.com/JT501/formik-semantic-ui-react) - [Semantic UI](https://github.com/turner-industries/formik-semantic-ui) ================================================ FILE: docs/api/connect.md ================================================ --- id: connect title: connect() --- `connect()` is a higher-order component (HoC) that allows you to hook anything into Formik's context. It is used internally to construct `` and `
`, but you can use it to build out new components as your needs change. ## Type signature ```tsx connect(Comp: React.ComponentType }>) => React.ComponentType ``` ## Example ```jsx import React from 'react'; import { connect, getIn } from 'formik'; // This component renders an error message if a field has // an error and it's already been touched. const ErrorMessage = props => { // All FormikProps available on props.formik! const error = getIn(props.formik.errors, props.name); const touch = getIn(props.formik.touched, props.name); return touch && error ? error : null; }; export default connect(ErrorMessage); ``` ================================================ FILE: docs/api/errormessage.md ================================================ --- id: errormessage title: --- `` is a component that renders the error message of a given field if that field has been visited (i.e.`touched[name] === true`) (and there is an `error` message present). It expects that all error messages are stored for a given field as a string. Like ``, ``, and ``, lodash-like dot path and bracket syntax is supported. ## Example ```diff import React from 'react'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import * as Yup from "yup"; const SignupSchema = Yup.object().shape({ name: Yup.string() .min(2, 'Too Short!') .max(70, 'Too Long!') .required('Required'), email: Yup.string() .email('Invalid email') .required('Required'), }); export const ValidationSchemaExample = () => (

Signup

{ // same shape as initial values console.log(values); }} > {({ errors, touched }) => ( - {errors.name && touched.name ? ( -
{errors.name}
- ) : null} + - {errors.email && touched.email ? ( -
{errors.email}
- ) : null} + )}
); ``` #### Props --- # Reference ## Props ### `children` `children?: ((message: string) => React.ReactNode)` A function that returns a valid React element. Will only be called when the field has been touched and an error exists. ```jsx // the render callback will only be called when the // field has been touched and an error exists and subsequent updates. {msg =>
{msg}
} ``` ### `component` `component?: string | React.ComponentType` Either a React component or the name of an HTML element to render. If not specified, `` will just return a string. ```jsx // --> {touched.email && error.email ?
{error.email}
: null} // --> {touched.email && error.email ? {error.email} : null} // --> {touched.email && error.email ? {error.email} : null} // This will return a string. React 16+. // --> {touched.email && error.email ? error.email : null} ``` ### `id` `id?: string` A field's id in Formik state. To get access to DOM elements for e2e testing purposes, it doesn't impact the implementation in any way as the prop can still be omitted. ```jsx // id will be used only for testing purposes // not contributing anything to the core implementation. ``` ### `name` `name: string` **Required** A field's name in Formik state. To access nested objects or arrays, name can also accept lodash-like dot path like `social.facebook` or `friends[0].firstName` ### `render` `render?: (error: string) => React.ReactNode` A function that returns a valid React element. Will only be called when the field has been touched and an error exists. ```jsx // the render callback will only be called when the // field has been touched and an error exists and subsequent updates.
{msg}
} /> ``` ================================================ FILE: docs/api/fastfield.md ================================================ --- id: fastfield title: --- ## Before we start `` is meant for performance _optimization_. However, you really do not need to use it until you do. Only proceed if you are familiar with how React's [`shouldComponentUpdate()`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) works. You have been warned. **No. Seriously. Please review the following parts of the official React documentation before continuing** - [React `shouldComponentUpdate()` Reference](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) - [`shouldComponentUpdate` in Action](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action) ## Overview `` is an optimized version of `` meant to be used on large forms (~30+ fields) or when a field has very expensive validation requirements. `` has the same exact API as ``, but implements `shouldComponentUpdate()` internally to block all additional re-renders unless there are direct updates to the ``'s relevant parts/slice of Formik state. For example, `` will only re-render when there are: - Changes to `values.firstName`, `errors.firstName`, `touched.firstName`, or `isSubmitting`. This is determined by shallow comparison. Note: dotpaths are supported. - A prop is added/removed to the `` - The `name` prop changes Other than for these aforementioned situations, `` will not re-render when other parts of Formik state change. However, all updates triggered by a `` will trigger re-renders to other "vanilla" `` components. ## When to use `` **If a `` is "independent" of all other ``'s in your form, then you can use ``**. More specifically, if the `` does not change behavior or render anything that is based on updates to another `` or ``'s slice of Formik state AND it does not rely on other parts of top-level `` state (e.g. `isValidating`, `submitCount`), then you can use `` as a drop-in replacement to ``. ## Example ```jsx import React from 'react'; import { Formik, Field, FastField, Form } from 'formik'; import * as Yup from 'yup'; const Basic = () => (

Sign Up

{ setTimeout(() => { alert(JSON.stringify(values, null, 2)); }, 500); }} > {formikProps => (
{/** This only updates for changes made to values.firstName, touched.firstName, errors.firstName */} {/** Updates for all changes because it's from the top-level formikProps which get all updates */} {formikProps.touched.firstName && formikProps.errors.firstName && (
{formikProps.errors.firstName}
)} {({ field, form, meta }) => (
{/** * This updates normally because it's from the same slice of Formik state, * i.e. path to the object matches the name of this */} {meta.touched ? meta.error : null} {/** This won't ever update since it's coming from from another /'s (i.e. firstName's) slice */} {form.touched.firstName && form.errors.firstName ? form.errors.firstName : null} {/* This doesn't update either */} {form.submitCount} {/* Imperative methods still work as expected */}
)} {/** Updates for all changes to Formik state and all changes by all s and s */} {({ field, form, meta }) => (
{/** Works because this is inside of a , which gets all updates */} {form.touched.firstName && form.errors.firstName ? form.errors.firstName : null}
)} {/** Updates for all changes to Formik state and all changes by all s and s */} )}
); ``` ================================================ FILE: docs/api/field.md ================================================ --- id: field title: --- `` will automagically hook up inputs to Formik. It uses the `name` attribute to match up with Formik state. `` will default to an HTML `` element. ## Rendering There are a few different ways to render things with ``. - `` - `` - `` - ~~``~~ _deprecated in 2.x. Using these will log warning_ `as` can either be a React component or the name of an HTML element to render. Formik will automagically inject `onChange`, `onBlur`, `name`, and `value` props of the field designated by the `name` prop to the (custom) component. `children` can either be an array of elements (e.g. `