@gravity-ui/onboarding
v0.15.0
Published
Onboarding for users - important part of any service. @gravity-ui/onboarding helps you to create hint based onboarding scenarios. Can use with React, any other frameworks and vanilla JS.
Readme
@gravity-ui/onboarding ·
Onboarding for users - important part of any service. @gravity-ui/onboarding helps you to create hint based onboarding scenarios. Can use with React, any other frameworks and vanilla JS.
- Small. ~3Kb(minified and gzipped) with zero dependencies
- Well tested. ~90% test coverage
- Small code footprint. Create onboarding scenario config and connect each step to UI with couple lines of code.
- No UI. Use your own components
- Good TypeScript support
// todo-list-onboarding.ts
export const {
useOnboardingStep,
useOnboardingPreset,
useOnboardingHint,
useOnboarding,
controller,
} = createOnboarding({
config: {
presets: {
toDoListFirstUage: {
name: '',
steps: [
createStep({
slug: 'createTodoList',
name: 'create-todo-list',
description: 'Click button to create todo list',
}),
/* other scanario steps */
],
},
},
},
// onboarding state from backend
baseState: () => {
/* ... */
},
getProgressState: () => {
/* ... */
},
// save new onboarding state to backend
onSave: {
state: (state) => {
/* ... */
},
progress: (progress) => {
/* ... */
},
},
});
// App.tsx
const {anchorRef, hint, open, onClose} = useOnboardingHint();
return (
<HintPopup
open={open}
anchor={anchorRef}
title={hint?.step.name}
description={hint?.step.description}
onClose={onClose}
/>
);
// todo-list.tsx
const {pass, ref} = useOnboardingStep('createFirstIssue');
return (
<Button
onClick={() => {
pass();
handleAddTodoList();
}}
ref={ref}
// ...
>
"Add new list"
</Button>
);
Install
npm i @gravity-ui/onboarding
Usage
TBD