{"_id":"@bonhomie/react-flow-form","_rev":"2-0ebd85cde4ba95b6001002f428546032","name":"@bonhomie/react-flow-form","dist-tags":{"latest":"2.1.0"},"versions":{"1.0.0":{"name":"@bonhomie/react-flow-form","version":"1.0.0","keywords":["react","forms","multi-step-form","stepper","wizard","onboarding","checkout","kyc","registration-flow","react-flow-form","form-builder","react-hooks","form-validation","ui-wizard","form-wizard","step-form","react-flow","flowform","localstorage","state-persistence","bonhomie"],"license":"MIT","_id":"@bonhomie/react-flow-form@1.0.0","maintainers":[{"name":"bonhomie95","email":"adeyemibabatundejoseph@gmail.com"}],"dist":{"shasum":"9cad8b140c97e13213601ab94edda1b5ce195ade","tarball":"https://registry.npmjs.org/@bonhomie/react-flow-form/-/react-flow-form-1.0.0.tgz","fileCount":6,"integrity":"sha512-pFW/PGQjGp9KfbPfGXNjw/A72ZuoIuQ2KoOcfQ0rohMD3WI24FiDhE3IvK5BlaDSwJo0QZ/KEl+28ulo3o/VsA==","signatures":[{"sig":"MEUCIQC/4hyYSkNmzDpkfjLc3soxmD5qH+qZmksR015nafs3iQIgR2IsOQX/ZzCyffziFp8QWvTJCEuStHEjmi9Wkl4Ub1w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14131},"main":"dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"dist/index.js","scripts":{"build":"tsup src/index.js --format esm,cjs --dts --minify","prepublishOnly":"npm run build"},"_npmUser":{"name":"bonhomie95","email":"adeyemibabatundejoseph@gmail.com"},"_npmVersion":"10.8.0","description":"A modern multi-step form engine for React: validation, transitions, progress bar, localStorage persistence, restore, and clean APIs.","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.9.3"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-flow-form_1.0.0_1764344425903_0.6653799520036567","host":"s3://npm-registry-packages-npm-production"}},"2.1.0":{"name":"@bonhomie/react-flow-form","version":"2.1.0","description":"A modern multi-step form engine for React: validation, transitions, progress bar, localStorage persistence, restore, and clean APIs.","type":"module","main":"dist/index.cjs","module":"dist/index.js","sideEffects":false,"scripts":{"build":"tsup src/index.js --format esm,cjs --dts --minify","prepublishOnly":"npm run build"},"keywords":["react","forms","multi-step-form","stepper","wizard","onboarding","checkout","kyc","registration-flow","react-flow-form","form-builder","react-hooks","form-validation","ui-wizard","form-wizard","step-form","react-flow","flowform","localstorage","state-persistence","bonhomie"],"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"tsup":"^8.5.1","typescript":"^5.9.3","react":"^18.3.0","react-dom":"^18.3.0"},"license":"MIT","types":"./dist/index.d.ts","_id":"@bonhomie/react-flow-form@2.1.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-Ma/djPQ26vG2oVUrj5My/goh5j1+RwquhEWuIsNdRZHXHDasX8ywIj/7YCawr00+R/Bw8addDaGCHUEqZQxhAQ==","shasum":"769123334d5f74f81032eb03795e814086763fd2","tarball":"https://registry.npmjs.org/@bonhomie/react-flow-form/-/react-flow-form-2.1.0.tgz","fileCount":6,"unpackedSize":17798,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDmYlPe4V4NGcVBAP3ErcadQlYo3mKXCUM9ukn3ynGCggIgMe/0DKgxIFew4RW3Q+8E+SknDnWoeL/XOLbaaaDOt/8="}]},"_npmUser":{"name":"bonhomie95","email":"adeyemibabatundejoseph@gmail.com"},"directories":{},"maintainers":[{"name":"bonhomie95","email":"adeyemibabatundejoseph@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-flow-form_2.1.0_1777495394734_0.3215439342634996"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-28T15:40:25.814Z","modified":"2026-04-29T20:43:15.009Z","1.0.0":"2025-11-28T15:40:26.087Z","2.1.0":"2026-04-29T20:43:14.862Z"},"license":"MIT","keywords":["react","forms","multi-step-form","stepper","wizard","onboarding","checkout","kyc","registration-flow","react-flow-form","form-builder","react-hooks","form-validation","ui-wizard","form-wizard","step-form","react-flow","flowform","localstorage","state-persistence","bonhomie"],"description":"A modern multi-step form engine for React: validation, transitions, progress bar, localStorage persistence, restore, and clean APIs.","maintainers":[{"name":"bonhomie95","email":"adeyemibabatundejoseph@gmail.com"}],"readme":"#
@bonhomie/react-flow-form
\n\n

\n \n \n \n \n

\n\n

\n โšก A modern, flexible multi-step form engine for React.
\n Includes validation per step, transitions, progress bar, state persistence, localStorage restore,
\n and clean APIs for onboarding, KYC, checkout, signup flows, and more.\n

\n\n---\n\n## ๐ŸŽฏ Why use React Flow Form?\n\nBuilding multi-step forms is **one of the most repeated tasks** in modern apps: KYC onboarding, user registration, checkout flows, pricing wizards, surveys, and job applications. Developers hate rewriting navigation logic, validation, transitions, persistence, and step management. This library makes it **plug-and-play**.\n\n---\n\n## ๐Ÿš€ Features\n\n- Next / Previous step navigation with step metadata\n- Per-step validation with error map returned\n- `setData()` for bulk data updates (new in v2.1)\n- Exposed `validateStep()` for manual validation triggers (new in v2.1)\n- Auto-save form state to `localStorage` with auto-restore on reload\n- Fade / slide transition class hooks (style-agnostic)\n- ``, ``, and `` components included\n- Full SSR safety โ€” `localStorage` access is guarded server-side\n\n---\n\n## ๐Ÿ“ฆ Installation\n\n```bash\nnpm install @bonhomie/react-flow-form\n# or\nyarn add @bonhomie/react-flow-form\n```\n\n---\n\n## ๐Ÿงช Quick Start\n\n```jsx\nimport {\n FlowForm,\n Step,\n ProgressBar,\n useMultiStepForm\n} from \"@bonhomie/react-flow-form\";\n\nexport default function SignupFlow() {\n const {\n data,\n update,\n next,\n back,\n errors,\n currentStep,\n totalSteps,\n step\n } = useMultiStepForm({\n storageKey: \"signup-flow\",\n initialData: { email: \"\", name: \"\" },\n steps: [\n {\n id: \"email\",\n validate: (data) =>\n data.email.includes(\"@\") ? true : { email: \"Invalid email\" },\n },\n {\n id: \"profile\",\n validate: () => true,\n }\n ],\n onComplete: (data) => {\n console.log(\"FINISHED:\", data);\n }\n });\n\n return (\n \n {(step) => (\n <>\n \n\n {step.id === \"email\" && (\n \n

Enter Email

\n update(\"email\", e.target.value)}\n />\n {errors.email &&

{errors.email}

}\n \n \n )}\n\n {step.id === \"profile\" && (\n \n

Your Name

\n update(\"name\", e.target.value)}\n />\n
\n \n \n
\n \n )}\n \n )}\n \n );\n}\n```\n\n---\n\n## โš™๏ธ API Reference\n\n### `useMultiStepForm(options)`\n\n**Options**\n\n| Option | Type | Description |\n| ------------- | -------------- | ------------------------------------------------ |\n| `steps` | `array` | Required. Each step: `{ id, validate }`. |\n| `initialData` | `object` | Default form state. |\n| `storageKey` | `string\\|null` | Enable localStorage persistence + restore. |\n| `onComplete` | `function` | Fired when last step passes validation. |\n\n> **Tip:** Define `steps` outside the component or wrap with `useMemo` to avoid recreating validators on every render.\n\n**Returned Values**\n\n| Value | Description |\n| ----------------------- | ---------------------------------------- |\n| `data` | All form state. |\n| `update(name, value)` | Update a single field. |\n| `setData(patch)` | Bulk update fields (object or updater fn). |\n| `next()` | Validate + advance. Returns `boolean`. |\n| `back()` | Go to previous step, clears errors. |\n| `reset()` | Reset to initial state, clears storage. |\n| `errors` | Validation error map from current step. |\n| `validateStep(index?)` | Manually trigger step validation. |\n| `currentStep` | Current step index (0-based). |\n| `totalSteps` | Total number of steps. |\n| `isLast` | `true` when on the last step. |\n| `step` | Current step object. |\n\n---\n\n## ๐Ÿงฑ Components\n\n### ``\n\nRender-prop wrapper. `children` must be a function `(step, currentStep, totalSteps) => ReactNode`.\n\n| Prop | Type | Description |\n| ------------- | -------- | -------------------------------------- |\n| `step` | `object` | Step object returned by hook |\n| `currentStep` | `number` | Current step index |\n| `totalSteps` | `number` | Number of steps |\n| `transition` | `string` | `\"fade\"` (default) or `\"slide\"`. Adds a CSS class โ€” add your own transition styles. |\n\n### ``\n\nLightweight wrapper for step content.\n\n```jsx\n\n

Step 1

\n\n```\n\n### ``\n\n```jsx\n\n```\n\n| Prop | Type | Description |\n| --------- | -------- | ------------------- |\n| `current` | `number` | Current step index |\n| `total` | `number` | Total steps |\n\n---\n\n## โš ๏ธ SSR Notes (Next.js / Remix)\n\n`localStorage` access is fully guarded server-side as of v2.1. You can safely import the hook in SSR environments โ€” persistence simply won't activate until the browser takes over.\n\n---\n\n## ๐Ÿฉน Troubleshooting\n\n**\"Validation not running\"** โ€” ensure your step contains `validate: (data) => true | { field: \"error\" }`.\n\n**\"Form not saving to storage\"** โ€” set `storageKey: \"my-form\"`.\n\n**\"Going next does nothing\"** โ€” your validator returned an error object, not `true`.\n\n---\n\n## ๐Ÿ—บ Roadmap\n\n- Animation presets (slide, zoom, curtain)\n- TypeScript rewrite\n- Zod/Yup schema integration (optional addon)\n- Visual form designer (Pro version)\n\n---\n\n## ๐Ÿ“„ License\n\nMIT โ€” Free for commercial and personal use.\n\n## ๐Ÿ‘จโ€๐Ÿ’ป Author\n\n**Bonhomie** ยท Full-stack Web & Mobile Developer ยท Creator of @bonhomie toolkits.\n","readmeFilename":"README.md"}