ylekhac/user-tutorial

React package, guiding user how using app

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
  );
  ...