From 49562da88b55886b0edad0cb0c3e18fb9aa735c5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 7 Nov 2025 16:58:08 +0000 Subject: [PATCH 1/7] Initial plan From 0b5b253e430be03e6c0bab381f84bc245fe0939a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 7 Nov 2025 17:23:46 +0000 Subject: [PATCH 2/7] Migrate documentation site to Fumadocs framework Co-authored-by: jaredpalmer <4060187+jaredpalmer@users.noreply.github.com> --- website/.gitignore | 3 +- website/content/docs/3rd-party-bindings.mdx | 16 + website/content/docs/api/connect.mdx | 30 + website/content/docs/api/errormessage.mdx | 128 + website/content/docs/api/fastfield.mdx | 132 + website/content/docs/api/field.mdx | 310 ++ website/content/docs/api/fieldarray.mdx | 281 ++ website/content/docs/api/form.mdx | 14 + website/content/docs/api/formik.mdx | 466 +++ website/content/docs/api/meta.json | 4 + website/content/docs/api/useField.mdx | 168 + website/content/docs/api/useFormik.mdx | 71 + website/content/docs/api/useFormikContext.mdx | 63 + website/content/docs/api/utils.mdx | 34 + website/content/docs/api/withFormik.mdx | 220 ++ website/content/docs/examples.mdx | 17 + .../docs/examples/async-submission.mdx | 16 + website/content/docs/examples/basic.mdx | 16 + website/content/docs/examples/checkboxes.mdx | 16 + .../dependent-fields-async-api-request.mdx | 16 + .../docs/examples/dependent-fields.mdx | 16 + .../content/docs/examples/field-arrays.mdx | 15 + .../docs/examples/instant-feedback.mdx | 15 + website/content/docs/examples/meta.json | 4 + .../content/docs/examples/more-examples.mdx | 5 + website/content/docs/examples/radio-group.mdx | 16 + website/content/docs/examples/typescript.mdx | 16 + .../docs/examples/with-material-ui.mdx | 16 + website/content/docs/guides/arrays.mdx | 100 + .../content/docs/guides/form-submission.mdx | 68 + website/content/docs/guides/meta.json | 4 + website/content/docs/guides/react-native.mdx | 47 + website/content/docs/guides/typescript.mdx | 129 + website/content/docs/guides/validation.mdx | 351 ++ website/content/docs/index.mdx | 241 ++ website/content/docs/manifest.json | 158 + website/content/docs/meta.json | 4 + website/content/docs/migrating-v2.mdx | 333 ++ website/content/docs/overview.mdx | 241 ++ website/content/docs/resources.mdx | 40 + website/content/docs/tutorial.mdx | 971 ++++++ website/lib/source.ts | 7 + website/mdx-components.tsx | 9 + website/next-env.d.ts | 3 +- .../{next.config.js => next.config.js.old} | 0 website/next.config.mjs | 29 + website/package.json | 15 +- website/postcss.config.js | 5 +- website/source.config.ts | 7 + website/src/app/docs/[[...slug]]/page.tsx | 41 + website/src/app/docs/layout.tsx | 11 + website/src/app/global.css | 3 + website/src/app/layout.tsx | 21 + website/src/app/page.tsx | 5 + website/src/{pages => pages.old}/_app.js | 0 website/src/{pages => pages.old}/_document.js | 0 .../src/{pages => pages.old}/blog/[slug].tsx | 0 .../src/{pages => pages.old}/blog/index.tsx | 0 .../{pages => pages.old}/docs/[...slug].tsx | 0 website/src/{pages => pages.old}/index.tsx | 0 website/src/{pages => pages.old}/users.tsx | 0 website/tailwind.config.js | 29 - website/tailwind.config.ts | 9 + website/tsconfig.json | 37 +- yarn.lock | 3097 +++++++++++++++-- 65 files changed, 7749 insertions(+), 390 deletions(-) create mode 100644 website/content/docs/3rd-party-bindings.mdx create mode 100644 website/content/docs/api/connect.mdx create mode 100644 website/content/docs/api/errormessage.mdx create mode 100644 website/content/docs/api/fastfield.mdx create mode 100644 website/content/docs/api/field.mdx create mode 100644 website/content/docs/api/fieldarray.mdx create mode 100644 website/content/docs/api/form.mdx create mode 100644 website/content/docs/api/formik.mdx create mode 100644 website/content/docs/api/meta.json create mode 100644 website/content/docs/api/useField.mdx create mode 100644 website/content/docs/api/useFormik.mdx create mode 100644 website/content/docs/api/useFormikContext.mdx create mode 100644 website/content/docs/api/utils.mdx create mode 100644 website/content/docs/api/withFormik.mdx create mode 100644 website/content/docs/examples.mdx create mode 100644 website/content/docs/examples/async-submission.mdx create mode 100644 website/content/docs/examples/basic.mdx create mode 100644 website/content/docs/examples/checkboxes.mdx create mode 100644 website/content/docs/examples/dependent-fields-async-api-request.mdx create mode 100644 website/content/docs/examples/dependent-fields.mdx create mode 100644 website/content/docs/examples/field-arrays.mdx create mode 100644 website/content/docs/examples/instant-feedback.mdx create mode 100644 website/content/docs/examples/meta.json create mode 100644 website/content/docs/examples/more-examples.mdx create mode 100644 website/content/docs/examples/radio-group.mdx create mode 100644 website/content/docs/examples/typescript.mdx create mode 100644 website/content/docs/examples/with-material-ui.mdx create mode 100644 website/content/docs/guides/arrays.mdx create mode 100644 website/content/docs/guides/form-submission.mdx create mode 100644 website/content/docs/guides/meta.json create mode 100644 website/content/docs/guides/react-native.mdx create mode 100644 website/content/docs/guides/typescript.mdx create mode 100644 website/content/docs/guides/validation.mdx create mode 100644 website/content/docs/index.mdx create mode 100644 website/content/docs/manifest.json create mode 100644 website/content/docs/meta.json create mode 100644 website/content/docs/migrating-v2.mdx create mode 100644 website/content/docs/overview.mdx create mode 100644 website/content/docs/resources.mdx create mode 100644 website/content/docs/tutorial.mdx create mode 100644 website/lib/source.ts create mode 100644 website/mdx-components.tsx rename website/{next.config.js => next.config.js.old} (100%) create mode 100644 website/next.config.mjs create mode 100644 website/source.config.ts create mode 100644 website/src/app/docs/[[...slug]]/page.tsx create mode 100644 website/src/app/docs/layout.tsx create mode 100644 website/src/app/global.css create mode 100644 website/src/app/layout.tsx create mode 100644 website/src/app/page.tsx rename website/src/{pages => pages.old}/_app.js (100%) rename website/src/{pages => pages.old}/_document.js (100%) rename website/src/{pages => pages.old}/blog/[slug].tsx (100%) rename website/src/{pages => pages.old}/blog/index.tsx (100%) rename website/src/{pages => pages.old}/docs/[...slug].tsx (100%) rename website/src/{pages => pages.old}/index.tsx (100%) rename website/src/{pages => pages.old}/users.tsx (100%) delete mode 100644 website/tailwind.config.js create mode 100644 website/tailwind.config.ts diff --git a/website/.gitignore b/website/.gitignore index ae0da2473..f2d804c96 100644 --- a/website/.gitignore +++ b/website/.gitignore @@ -6,4 +6,5 @@ node_modules *.log .DS_Store .vercel -public/sitemap.xml \ No newline at end of file +public/sitemap.xml +.source \ No newline at end of file diff --git a/website/content/docs/3rd-party-bindings.mdx b/website/content/docs/3rd-party-bindings.mdx new file mode 100644 index 000000000..d95bb375c --- /dev/null +++ b/website/content/docs/3rd-party-bindings.mdx @@ -0,0 +1,16 @@ +--- +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) diff --git a/website/content/docs/api/connect.mdx b/website/content/docs/api/connect.mdx new file mode 100644 index 000000000..12334ee08 --- /dev/null +++ b/website/content/docs/api/connect.mdx @@ -0,0 +1,30 @@ +--- +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); +``` diff --git a/website/content/docs/api/errormessage.mdx b/website/content/docs/api/errormessage.mdx new file mode 100644 index 000000000..c0617c212 --- /dev/null +++ b/website/content/docs/api/errormessage.mdx @@ -0,0 +1,128 @@ +--- +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}
} /> +``` diff --git a/website/content/docs/api/fastfield.mdx b/website/content/docs/api/fastfield.mdx new file mode 100644 index 000000000..32fa48ee3 --- /dev/null +++ b/website/content/docs/api/fastfield.mdx @@ -0,0 +1,132 @@ +--- +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 */} + + + + + + )} +
+
+); +``` diff --git a/website/content/docs/api/field.mdx b/website/content/docs/api/field.mdx new file mode 100644 index 000000000..a2c1002c6 --- /dev/null +++ b/website/content/docs/api/field.mdx @@ -0,0 +1,310 @@ +--- +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. `