{"id":17880117,"url":"https://github.com/fatmali/react-formik-wizard","last_synced_at":"2025-07-17T19:37:36.082Z","repository":{"id":38426091,"uuid":"324201369","full_name":"fatmali/react-formik-wizard","owner":"fatmali","description":"A simple opinionated library for creating wizards with React and Formik using JSON","archived":false,"fork":false,"pushed_at":"2023-10-16T22:19:01.000Z","size":6043,"stargazers_count":8,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T09:12:53.687Z","etag":null,"topics":["creating-wizards","formik","json","react","typescript","wizards"],"latest_commit_sha":null,"homepage":"https://fatmali.github.io/react-formik-wizard","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fatmali.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-24T17:00:43.000Z","updated_at":"2023-09-08T01:31:12.000Z","dependencies_parsed_at":"2024-10-28T12:29:53.056Z","dependency_job_id":"5eb58ca2-d991-43b5-ab3d-b14022cd93fd","html_url":"https://github.com/fatmali/react-formik-wizard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fatmali%2Freact-formik-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fatmali%2Freact-formik-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fatmali%2Freact-formik-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fatmali%2Freact-formik-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fatmali","download_url":"https://codeload.github.com/fatmali/react-formik-wizard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244924936,"owners_count":20532872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["creating-wizards","formik","json","react","typescript","wizards"],"created_at":"2024-10-28T12:10:37.374Z","updated_at":"2025-03-22T07:30:47.151Z","avatar_url":"https://github.com/fatmali.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Formik Wizard\n\n\u003e A simple opinionated library for creating dynamic forms (aka wizards) with React using JSON\n\n[![NPM](https://img.shields.io/npm/v/react-formik-wizard.svg)](https://www.npmjs.com/package/react-formik-wizard) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Intro\n\nBuilding forms is hectic. Building wizards, even more so! I built this library to enable me to create quick wizards and forms using plain json. Having a form defined in a structure like JSON has a lot of advantages, to name a few:\n\n1. Lose coupling between your React components and your forms, you can have your forms stored as json anywhere in your architecture and deployed independently of your frontend code 🚀 \n2. Easy to build tools that would help in form creation and maintenace by non-technical team members, saves your engineers time ⏰ \n\n## Install\n\n```bash\nnpm install --save react-formik-wizard\n```\n\n## Usage\n\n```tsx\nimport React from 'react'\nimport Wizard from 'react-formik-wizard'\n\nconst App = () =\u003e {\n\n  // JSON representing form, this can be stored in your code or in your server and fetched at runtime.\n  const form = {\n    name: 'My Wizard',\n    settings: {\n      disableNextUntilValid: true,\n      disableSubmitUntilValid: true,\n      useSections: true\n    },\n    steps: [\n      {\n        name: 'Personal Info',\n        id: 'personal_info',\n        sections: [\n          {\n            name: 'Biodata',\n            fields: [\n              {\n                label: 'First Name',\n                id: 'first_name',\n                type: 'text',\n                required: true\n              },\n              {\n                label: 'Last Name',\n                id: 'last_name',\n                type: 'text',\n                required: true\n              },\n              {\n                label: 'Date of Birth',\n                id: 'dob',\n                type: 'date',\n                required: true\n              }\n            ]\n          }\n        ]\n      },\n      {\n        name: 'Medical',\n        id: 'medical',\n        sections: [\n          {\n            name: 'Current conditions',\n            fields: [\n              {\n                label: 'If yes, list all conditions you have',\n                id: 'all_conditions',\n                type: 'combobox',\n                options: [\n                  { value: '1', label: 'Diabetes' },\n                  { value: '2', label: 'HBP' }\n                ],\n                required: true\n              }\n            ]\n          }\n        ]\n      }\n    ],\n    validation: []\n  }\n\n  const onComplete = (values: any) =\u003e {\n    console.log(values)\n  }\n\n  return \u003cWizard wizard={wizard} onComplete={onComplete} /\u003e\n}\n\nexport default App\n```\n\n### Defining Custom Components\n\nIt's possible to define custom UI to render fields instead of the default components rendered. For example: \n\n```tsx\nconst CustomDateInput = ({ form, field }: any) =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cDayPickerInput onDayChange={(e) =\u003e form.setFieldValue(field.name, e)} /\u003e\n    \u003c/div\u003e\n  )\n}\n\nconst App = () =\u003e {\n  const wizard = {\n    name: 'JSON Wizard',\n    settings: {\n      disableNextUntilValid: true,\n      disableSubmitUntilValid: true,\n      useSections: true\n    },\n    steps: [\n      {\n        name: 'Medical',\n        id: 'medical',\n        sections: [\n          {\n            name: 'Personal Information',\n            fields: [\n              {\n                label: 'Do you have any current conditions?',\n                id: 'current_conditions_available',\n                type: 'custom-date',\n              },\n            ]\n          }\n        ]\n      }\n    ],\n  }\n\n  return (\n    \u003cWizard\n      wizard={wizard}\n      onComplete={onComplete}\n      customFields={{\n        custom-date: {\n          component: CustomDateInput\n        }\n      }}\n    /\u003e\n  )\n```\n\n## Conditional Rendering\n\nIt's useful in dynamic forms/wizards to render fields depending on the values of other fields. In order to render fields conditionally, you can define it like this in the schema: \n\n```tsx\n  const wizard = {\n    name: 'JSON Wizard',\n    settings: {\n      disableNextUntilValid: true,\n      disableSubmitUntilValid: true,\n      useSections: true\n    },\n    steps: [\n      {\n        name: 'Medical',\n        id: 'medical',\n        sections: [\n          {\n            name: 'Personal Information',\n            fields: [\n              fields: [\n              {\n                label: 'Do you have any current conditions?',\n                id: 'current_conditions',\n                type: 'select',\n                options: [\n                  { value: 'yes', label: 'Yes' },\n                  { value: 'no', label: 'No' }\n                ],\n                required: true\n              },\n              {\n                label: 'If yes, list all conditions you have',\n                id: 'all_conditions',\n                type: 'select',\n                options: [\n                  { value: '1', label: 'Diabetes' },\n                  { value: '2', label: 'HBP' }\n                ],\n                required: true,\n                show: {\n                  when: 'current_conditions',\n                  is: 'yes'\n                }\n              },\n            ]\n          }\n        ]\n      }\n    ],\n  }\n```\nConditional rendering is determined by the `show` property. The `show` property is an object that \n1. Expects a `when` which is the id of the field whose value is depended upon. \n2. It also expect any of the following params: \n      - `is`: which checks if the field ===  `when` , \n      - `gt`: checks if `when` \u003e `is`, \n      - `gte`: checks if `when` \u003e= `is`, \n      - `lt`: checks if `when` \u003c= `lt`, \n      - `lte`: checks if `when` \u003c= `lte`, \n      - `contains`: checks if `when` contains `contains`\n\n## License\n\nMIT © [fatmali](https://github.com/fatmali)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffatmali%2Freact-formik-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffatmali%2Freact-formik-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffatmali%2Freact-formik-wizard/lists"}