formik-debugger

Table of Contents

• Required Packages
• Library installation
• Usage

Required Packages

This package requires the following peer dependencies

• "formik": "^2.2.9" or higher
• "react": "^17.0.1" or higher
• "react-dom": "^17.0.1" or higher

Library installation

npm install formik-debugger

yarn add formik-debugger

pnpm install formik-debugger

bun add formik-debugger

Usage

Formik-Debugger supports both forms of Formik and supports both a Draggable Modal version and a fixed non-modal version. Multiple <DebuggerModals/> can be called at the same time without issue if desired to support multiple instances of Formik on your application at once.

Debugger Modal

Formik Initialized through the <Formik/> Component

function App() {
    const [isOpen, setIsOpen] = useState(false)

    return (
        <Formik 
            initialValues={formikInitialState} 
            //...
        >
            {props => (
                <>
                    <input name={"username"} onChange={props.handleChange} value={props.values.username}/>
                    <input name={"password"} onChange={props.handleChange} value={props.values.password}/>
                    <DebuggerModal open={isOpen} onClose={()=>setIsOpen(false)} formik={props}/>
                    <button onClick={()=>setIsOpen(prev=>!prev)}>Formik</button>
                </>
            )}
        </Formik>
    )
}

Formik Initialized through the useFormik hook

function App() {
    const [isOpen, setIsOpen] = useState(false)

    const formik = useFormik({
        initialValues: formikInitialState,
        validationSchema: formikSchema,
    } as FormikConfig<typeof formikInitialState>)
    
    return (
        <>
            <input name={"username"} onChange={formik.handleChange} value={props.values.username}/>
            <input name={"password"} onChange={formik.handleChange} value={formik.values.password}/>
            <DebuggerModal open={isOpen} onClose={()=>setIsOpen(false)} formik={formik}/>
            <button onClick={()=>setIsOpen(prev=>!prev)}>Formik</button>
        </>
           
    )
}

Debugger

A simplier version that remains static on the page (also compatible with either version of Formik)

function App() {
    const formik = useFormik({
        initialValues: formikInitialState,
        validationSchema: formikSchema,
    } as FormikConfig<typeof formikInitialState>)

    return (
        <>
            <input name={"username"} onChange={formik.handleChange} value={props.values.username}/>
            <input name={"password"} onChange={formik.handleChange} value={formik.values.password}/>
            <Debugger formik={formik}/>
        </>

    )
}

Custom Tools

If you wish to add additional tools to the debugger simple add your custom tool to an array and pass them into the props of either components as so

function App() {
    const [isOpen, setIsOpen] = useState(false)

    const formik = useFormik({
        initialValues: formikInitialState,
        validationSchema: formikSchema,
    } as FormikConfig<typeof formikInitialState>)
    
    const customTools = [
        <CustomToolOne/>,
        <CustomToolTwo/>,
        <CustomToolThree/>,
    ]
    
    return (
        <>
            <input name={"username"} onChange={formik.handleChange} value={props.values.username}/>
            <input name={"password"} onChange={formik.handleChange} value={formik.values.password}/>
            <DebuggerModal open={isOpen} onClose={()=>setIsOpen(false)} formik={formik} customTools={customTools}/>
            <Debugger formik={formik} customTools={customTools}/>
            <button onClick={()=>setIsOpen(prev=>!prev)}>Formik</button>
        </>
           
    )
}

A new option for custom tools should appear in the tool labeled CUSTOM TOOLS Where you can see your custom tools!