Formik Plugins

[johnrom]

🔌 Formik Plugins

I've identified several use cases across Formik issues for adding a plugin system to Formik. The functionality of a plugin would be:

1. Modify the Return Value of useFormik
2. Intercept reducer and decorate state
3. Expose their own hooks to access bits that aren't relevant to Formik's Core API.

It would allow us to use composition to expand Formik's functionality without adding responsibilities to the core library.

Example Uses

• Strongly-typed Status. Currently, Formik Status is kind of a one-off weird thing that doesn't have anything to do with Formik's Core functionality but we provide to users for convenience, as a shortcut to creating their own separate Context. This could probably be done with a plugin with stronger types without adding a Type parameter to the root Formik component or useFormik hook. For backwards compatibility this plugin would be used by the "default initializer" with a type of any.

• Remove Yup. I've never in my life used Yup but all my projects using Formik have it installed! heh! Yup is great, but it's not suitable to everyone's needs. It should live in a Plugin. For backwards compatibility this plugin would be used by the "default initializer".

• Undo/redo. One could create a plugin that records reducer history and allows replayability.

• Event Listeners. Some devs would like to listen to events like "onFormChange", etc. A plugin could enable that functionality by generating side effects from dispatches.

• formik-native. Currently Formik's non-RN core functionality actually tests for React Native's presence in certain cases (specifically getValueFromEvent in v3), but this could be done via a Plugin instead.

• Disabling entire form

• Managing disabled inputs

The Proposed API

I propose we create Formik initializers using createFormik which we then pass to useFormik or Formik to add extra functionality to the reducer. It would be something like:

// I have no idea if this is possible with current TypeScript version
// initializer is automatically decorated with types of plugins, like:
// formikInitializer: FormikInitializer<Values, [FormikStatusPlugin<YourType>, FormikYupValidatorPlugin()]>
const myFormikInitializer = createFormik()
  .addPlugin(new FormikStatusPlugin<YourType>())
  .addPlugin(new FormikYupValidatorPlugin()); // example of other uses for plugins

const MyForm = () => {
  const formik = useFormik({ ...formikProps }, myFormikInitializer);
  // or
  return <Formik initializer={myFormikInitializer} {...formikprops} />
};

[github-actions]

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

[github-actions]

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

[github-actions]

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

[github-actions]

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