Declarative effects for Formik forms

Downloads in past


166121.2.06 years ago6 years agoMinified + gzip package size for formik-effect in KB


Formik Effect
Declarative Formik component for side-effects
npm install formik-effect --save

Note: this has peer dependencies of prop-types, react, and formik (obvs)
Basic Usage
Import the <Effect > component and put it inside any Formik form. It renders null! Pass it an onChange() function and it will be called whenever your Formik form updates.
import React from 'react'
import { Formik, Field, Form } from 'formik'
import { Effect } from 'formik-effect'

export const Signup = () =>
    <h1>My Cool Form with a SideEffect</h1>
      onSubmit={values => console.log(values)}
      initialValues={{ firstName: '', lastName: '', email: '' }}
      render={props =>
        <Form className="whatever">
          <Effect onChange={(currentFormikState, nextFormikState) => {
               // do whatevs
               // FYI if you alter state it will cause another render
          <Field name="firstName" placeholder="First Name" />
          <Field name="lastName" placeholder="Last Name" />
          <Field name="email" type="email" placeholder="Email Address" />
          <button type="submit">Submit</button>


Only one!

onChange: (currentState: FormikState<Values>, nextState: FormikState<Values> => void;

Put your side effect here....
FormikState includes:
  • values
  • errors
  • touched
  • isSubmitting