https://github.com/a-type/onboarding
Simple React state management for onboarding flows
https://github.com/a-type/onboarding
Last synced: 11 months ago
JSON representation
Simple React state management for onboarding flows
- Host: GitHub
- URL: https://github.com/a-type/onboarding
- Owner: a-type
- License: mit
- Created: 2025-03-18T19:16:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-26T18:26:45.000Z (over 1 year ago)
- Last Synced: 2025-03-28T10:19:20.565Z (about 1 year ago)
- Language: TypeScript
- Size: 38.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `@a-type/onboarding`
Simple React state management for onboarding flows
## Usage
```ts
const firstTimeWelcome = createOnboarding(
// unique name for the flow
'firstTimeWelcome',
// string keys for each step
['hello', 'navigation', 'settings', 'firstPost'] as const,
// start immediately?
true,
);
// onboarding object has hooks and direct methods
const begin = firstTimeWelcome.useBegin();
const skip = firstTimeWelcome.useSkip();
const { show, next, previous, isLast, isOnly } =
firstTimeWelcome.useStep('settings');
const cancel = firstTimeWelcome.useCancel();
firstTimeWelcome.begin();
firstTimeWelcome.skip();
firstTimeWelcome.cancel();
firstTimeWelcome.next();
firstTimeWelcome.previous();
firstTimeWelcome.completeStep('hello'); // only advances if the step is active
firstTimeWelcome.activeStep; // one of your step strings, or "complete," or null (not started).
```