Skip to content

Instantly share code, notes, and snippets.

@iamdanthedev
Created February 19, 2018 13:04
Show Gist options
  • Save iamdanthedev/c80faaa1707c8693f6aacfb7e6b5307d to your computer and use it in GitHub Desktop.
Save iamdanthedev/c80faaa1707c8693f6aacfb7e6b5307d to your computer and use it in GitHub Desktop.
storybook formik decorator
const initialValues = { comment: 'hello'; }
storiesOf('Form Controls: Select', module)
.addDecorator(withFormValues(initialValues)
.add('default', () => (
<Select name="select" label="Country..." options={selectOptions} />
</Formik>
))
import React from 'react';
import { Formik } from 'formik';
/**
* Decorates a story with Formik
* @param initialValues
* @param validationSchema - yup schema (formik validationSchema)
* @returns {function(*): *}
*/
export const withFormValues = (initialValues, validationSchema) => story => (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={values => console.log(values)}
>
{story()}
</Formik>
);
@arturopie
Copy link

You can use a storybook action for onSubmit

import { action } from "@storybook/addon-actions";

const formSubmit = action("form-submit");

...
    onSubmit={formSubmit}
...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment