{"id":24416853,"url":"https://github.com/chrisuser/react-wizard-onboarding","last_synced_at":"2026-04-11T17:32:03.356Z","repository":{"id":272671678,"uuid":"686131403","full_name":"ChrisUser/react-wizard-onboarding","owner":"ChrisUser","description":"Pretty fancy onboarding wizard, for your webapp or your website, made in React.","archived":false,"fork":false,"pushed_at":"2025-01-17T09:30:31.000Z","size":668,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-06T20:45:02.508Z","etag":null,"topics":["onboarding","react","walkthrough","wizard","wizard-steps"],"latest_commit_sha":null,"homepage":"https://chrisuser.github.io/react-wizard-onboarding/","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/ChrisUser.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,"zenodo":null}},"created_at":"2023-09-01T20:30:04.000Z","updated_at":"2025-08-03T14:42:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"7405b3ce-b44d-468a-b66a-3c72b24fa68e","html_url":"https://github.com/ChrisUser/react-wizard-onboarding","commit_stats":null,"previous_names":["chrisuser/react-wizard-onboarding"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ChrisUser/react-wizard-onboarding","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Freact-wizard-onboarding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Freact-wizard-onboarding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Freact-wizard-onboarding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Freact-wizard-onboarding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChrisUser","download_url":"https://codeload.github.com/ChrisUser/react-wizard-onboarding/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Freact-wizard-onboarding/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31684950,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["onboarding","react","walkthrough","wizard","wizard-steps"],"created_at":"2025-01-20T08:14:48.221Z","updated_at":"2026-04-11T17:32:03.344Z","avatar_url":"https://github.com/ChrisUser.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Wizard Onboarding\n\nPretty fancy onboarding wizard for your website, made in React.\n\n![React Wizard Onboarding](readme-header-img.png)\n\nLive **demo** at [https://chrisuser.github.io/react-wizard-onboarding](https://chrisuser.github.io/react-wizard-onboarding/).\n\n# Installation\n\nInstall via npm\n\n```sh\nnpm install --save react-wizard-onboarding\n```\n\nor yarn\n\n```sh\nyarn add react-wizard-onboarding\n```\n\n# Usage\n\n1. Wrap your app inside the `\u003cTutorialProvider\u003e` context.\n\n### Example\n\n```typescript\nconst config = createTutorialConfig({\n    sticky: true,\n    darkMode: true,\n    displayDots: true,\n    keyboard: true,\n    labels: { next: 'Next', back: 'Back', close: 'Close', complete: 'Done' }\n})\n\nconst Setup: React.FC = () =\u003e {\n    return (\n        \u003cTutorialProvider config={config}\u003e\n            \u003cApp /\u003e\n        \u003c/TutorialProvider\u003e\n    )\n}\n\nReactDOM.createRoot(document.getElementById('root')!).render(\u003cSetup /\u003e)\n```\n\n2. Register all the elements of a page to include them into the onboarding carousel.\n\n### Example\n\n```typescript\nconst { registerTutorialComponent, startTutorial } = useTutorial()\n...\n\nreturn (\n    \u003cdiv className=\"main-container\"\u003e\n        \u003cheader\n            ref={registerTutorialComponent({\n                position: 1,\n                id: 'header',\n                tutorialKey: 'main_tutorial',\n                text: 'This is the header element...'\n            })}\n        \u003e\n    ...\n)\n```\n\n3. Call the `startTutorial` method from the `useTutorial` hook anywhere in the page (e.g. with an `onClick` or `useEffect`).\n\n### Example\n\n```tsx\n\u003cbutton onClick={() =\u003e startTutorial('main_tutorial')}\u003eStart tour\u003c/button\u003e\n```\n\n# Hooks\n\n- `registerTutorialComponent: (componentData: TutorialComponentData)` — Registers a component to be highlighted during onboarding. Returns a ref callback.\n- `startTutorial: (tutorialKey?: string)` — Starts the tutorial. Pass a `tutorialKey` to run only the steps registered under that key. If omitted, all registered components are included.\n\n# Keyboard Navigation\n\nWhen `keyboard` is enabled (default `true`), the following keys work while a tour is active:\n\n| Key | Action |\n| --- | --- |\n| `→` / `↓` | Advance to next step |\n| `←` / `↑` | Go back to previous step |\n| `Escape` | Close the tour |\n\n# Props\n\n### `TutorialComponentData` — connect a component to the onboarding process\n\n| Name | Optional | Type | Description |\n| --- | --- | --- | --- |\n| id | | `string` | Unique component identifier |\n| position | | `number` | Step order within the tutorial |\n| tutorialKey | | `string` | Groups steps into named tours |\n| text | ✔️ | `string` | Step description text |\n| image | ✔️ | `string` | Step image URL |\n| advanceOnClick | ✔️ | `boolean` | Hides the Next button; the tour advances when the user clicks the highlighted element |\n\n### `TutorialConfiguration` — configure the onboarding wizard UI\n\n| Name | Optional | Type | Description |\n| --- | --- | --- | --- |\n| title | ✔️ | `string` | Wizard title shown in the modal header |\n| sticky | ✔️ | `boolean` | Attaches the modal to each highlighted element |\n| darkMode | ✔️ | `boolean` | Enables the dark colour theme |\n| displayDots | ✔️ | `boolean` | Shows page-dot navigation (non-sticky mode only) |\n| keyboard | ✔️ | `boolean` | Enables Arrow-key and Escape keyboard navigation. Defaults to `true` |\n| scrollToStep | ✔️ | `boolean` | Auto-scrolls off-screen target elements into view before showing the spotlight. Defaults to `true` |\n| hideArrowOnSticky | ✔️ | `boolean` | Hides the directional arrow on the sticky modal |\n| labels | ✔️ | `{ next?: string; complete?: string; close?: string; back?: string }` | Custom button labels |\n| icons | ✔️ | `{ next?: ReactNode; complete?: ReactNode; close?: ReactNode; back?: ReactNode }` | Custom button icons |\n| onBeforeStep | ✔️ | `(stepIndex: number) =\u003e void \\| Promise\u003cvoid\u003e` | Async callback fired before entering a step. The tour waits for the promise to resolve |\n| onAfterStep | ✔️ | `(stepIndex: number) =\u003e void \\| Promise\u003cvoid\u003e` | Async callback fired after leaving a step. The tour waits for the promise to resolve |\n\n### Step lifecycle callbacks example\n\n```typescript\nconst config = createTutorialConfig({\n    sticky: true,\n    onBeforeStep: async (index) =\u003e {\n        // pre-load data, trigger a UI change, log analytics…\n        await fetch(`/api/analytics/step/${index}`)\n    },\n    onAfterStep: async (index) =\u003e {\n        console.log('Left step', index)\n    }\n})\n```\n\n### `advanceOnClick` example\n\n```typescript\nregisterTutorialComponent({\n    position: 3,\n    id: 'submit-button',\n    tutorialKey: 'main_tutorial',\n    text: 'Click this button to continue to the next step.',\n    advanceOnClick: true   // Next button is hidden; clicking the element advances the tour\n})\n```\n\n# License\n\nreact-wizard-onboarding is MIT licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisuser%2Freact-wizard-onboarding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisuser%2Freact-wizard-onboarding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisuser%2Freact-wizard-onboarding/lists"}