Guide user

Guide for first user

Install

 npm install guide-user

Usage

 import Guide, { GuideProvider } from 'guide-user';
....
<GuideProvider>
...
<Guide
step={1}
text="This is text to guide"
>
...
</GuideProvider>

Section

GuideProvider

Have one properties is value Properties of it

 mode?: "tour" | "action-driven";
nextStep?: function;
previousStep?: function;
run?: boolean;
setRun?: boolean;
setStep?: function;
setTotal?: function;
step: number;
total?: number;

and default value is

 mode: "action-driven"

Guide

Have 2 mode is tour or action-driven, so have 2 props for components. With tour:

 children: JSX.Element;
position?: [("left" | "right" | "top" | "bottom")];
step: number;
title?: string;
message?: string;

With action-driven

 children: JSX.Element;
position?: ("left" | "right" | "top" | "bottom")[];
step: number;
text?: string;
type?: "button" | "input";

GuideContext

Use with useConext hook

 ...
const { nextStep,
previousStep,
run, setRun,
setStep, setTotal
step, total,
} = useContext(
GuideContext
);
...