formik-effect

Declarative effects for Formik forms

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
formik-effect
167121.2.05 years ago5 years agoMinified + gzip package size for formik-effect in KB

Readme

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 = () =>
  <div>
    <h1>My Cool Form with a SideEffect</h1>
    <Formik
      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>
         
        </Form>}
    />
  </div>;

Prop

Only one!

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

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

Author