ez-form-context.tsx

import {
    PropsWithChildren,
    createContext,
    useState,
} from 'react'

export const FormFactory = <T,>(init: T) => {
    const Context = createContext<{
        value: T
        setValue: <K extends keyof T>(
            key: K,
            value: T[K],
        ) => void
    }>({ value: init, setValue: () => {} })

    const Form = ({ children }: PropsWithChildren) => {
        const [state, setState] = useState(init)

        return (
            <Context.Provider
                value={{
                    value: init,
                    setValue: (key, value) =>
                        setState({
                            ...state,
                            [key]: value,
                        }),
                }}
            >
                {children}
            </Context.Provider>
        )
    }

    return [Form, Context] as const
}