Skip to content

Instantly share code, notes, and snippets.

@calebmeyer
Forked from thiagobutignon/Debug.js
Created July 26, 2023 16:58
Show Gist options
  • Save calebmeyer/97074f4d21dd5664dd484fcbb158c2fd to your computer and use it in GitHub Desktop.
Save calebmeyer/97074f4d21dd5664dd484fcbb158c2fd to your computer and use it in GitHub Desktop.
Debug Formik
import React from 'react';
import {FormikConsumer} from 'formik';
export const Debug = () => (
<div
style={{
background: '#f6f8fa',
borderRadius: 4,
boxShadow: '0 0 1px #eee inset',
margin: '3rem 0'
}}
>
<div
style={{
background: '#555',
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
color: '#fff',
fontSize: 11,
fontWeight: 500,
letterSpacing: '1px',
padding: '.5rem',
textTransform: 'uppercase'
}}
>
{'Formik State'}
</div>
<FormikConsumer>
{({validationSchema, validate, onSubmit, ...rest}) => (
<pre
style={{
fontSize: '.65rem',
overflowX: 'scroll',
padding: '.25rem .5rem'
}}
>
{JSON.stringify(rest, null, 2)}
</pre>
)}
</FormikConsumer>
</div>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment