Skip to content

v0.2: Formik adapter (formdraft/formik) #3

@mayrang

Description

@mayrang

Idea

Add a Formik-specific adapter that mirrors the existing formdraft/rhf pattern. Formik is at 3.85M weekly downloads; formik-persist (Jared Palmer's own package) has been unmaintained since 2018. The market gap is verified.

Proposed API

```tsx
import { useFormik } from 'formik';
import { useFormDraftFormik } from 'formdraft/formik';
import { zodAdapter } from 'formdraft';

const formik = useFormik({
initialValues: { name: '', bio: '' },
onSubmit: async (v) => api.submitProfile(v),
});

const { status, lastSavedAt, discard } = useFormDraftFormik(formik, {
key: 'profile-form',
schema: zodAdapter(Schema),
sync: api.saveProfile,
});
```

Implementation notes

  • Same pattern as `useFormDraftRHF` (~50 LOC)
  • Subscribe to `formik.values` via `useEffect` (no `watch` API in Formik like RHF)
  • On restore, call `formik.setValues(draft.values)`
  • Guard against the watch→reset feedback loop (see `hasRestoredRef` pattern in RHF adapter)

File structure

  • `src/formik/index.ts`
  • `src/formik/useFormDraftFormik.ts`
  • `src/formik/tests/useFormDraftFormik.test.tsx`
  • Add subpath export in `package.json`
  • Add tsup entry

Tests

Mirror the 2 RHF adapter tests:

  1. Persists Formik values on input change
  2. Restores into Formik on mount when storage has valid draft

Acceptance

  • New subpath export `formdraft/formik`
  • 2+ unit tests passing
  • README mentions Formik integration in install section
  • Bundle still under 8 KB (Formik adapter goes into its own chunk)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions