Guiderjs Vanilla

Get started

# npm
$ npm install @guiderjs/vanilla
# yarn
$ yarn add @guiderjs/vanilla

usage

<!-- index.html -->
<div>
  <div class="card">Card content</div>
</div>

// index.ts
import Guider, { Step } from "@guiderjs/vanilla";
// guider steps
const steps: Step[] = [{ key: "card", target: ".card" }];
// guider instance
const guider = new Guider({ steps });
// start guider
guider.start();

API

Guider

class Guider {
  /**
   * start guider from the step has given key, if no step key given, start from the first step.
   * guider needs to be `show` or `stop` status
   * @param stepKey key of the step to start
   */
  start: (stepKey?: string) => void;
  /**
   * go to next step, if current step is the last step, exit
   */
  next: () => void;
  /**
   * go back one step, if current step is the first step, do nothing.
   */
  back: () => void;
  /**
   * exit guider
   */
  exit: () => Promise<void>;
  /**
   * unmount guider container
   */
  unmount: () => void;
}

Option

| props | description | type | default | | ------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | --------- | | steps (required) | an array contains info of guider steps | Step[] | - | | boundary | selector of boundary element | string | - | | onStart | the callback function when guider start | () => void | - | | onExit | the callback function when guider exited | () => void | - | | target | selector to select target (highlighted) element | string | - | | targetClass | className of target | string | - | | preventTarget | if prevent interaction of origin target element | boolean | true | | onTargetClick | the callback function when user click target (highlighted) part | () => void | - | | overlayColor | background color of overlays | string | "#333333" | | overlayOpacity | opacity of overlays | number | 0.5 | | overlayClass | className of overlays | string | - | | zIndex | zindex property of guider container | number | 99999 | | popover | popover element | Element | - | | popoverPosition | position of popover (works when you have popover) | "auto" | "center" | "target-top" | "target-bottom" | "target-left" | "target-right" | "auto" | | popoverAnchor | popover position to target | "start"|"middle"|"end" | "middle" | | popoverGap | gap (px) between popover and target, (works when you have popover and target) | number | 8 | | popoverLeft | left property of popover | string | "0px" | | popoverTop | top property of popover | string | "0px" | | popoverAnimation | popover animation name | string | "flip-y" | | popoverAnimationDuration | popover animation duration | string | "400ms" | | popoverAnimationFunction | popover animation timing function | string | "ease" | | onStepStart | the callback function when step start | (step:Step,index:number) => void | - | | onStepExit | the callback function when step exit | (step:Step,index:number) => void | - |

Step

(info of one guider step, will override component props)

| property | description | type | default | | ------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | --------- | | key (required) | unique key of step | string | - | | target | selector to select target (highlighted) element | string | - | | targetClass | className of target | string | - | | preventTarget | if prevent interaction of origin target element | boolean | true | | onTargetClick | the callback function when user click target (highlighted) part | () => void | - | | overlayColor | background color of overlays | string | "#333333" | | overlayOpacity | opacity of overlays | number | 0.5 | | overlayClass | className of overlays | string | - | | zIndex | zindex property of guider container | number | 99999 | | popover | popover element | Element | - | | popoverPosition | position of popover (works when you have popover) | "auto" | "center" | "target-top" | "target-bottom" | "target-left" | "target-right" | "auto" | | popoverAnchor | popover position to target | "start"|"middle"|"end" | "middle" | | popoverGap | gap (px) between popover and target, (works when you have popover and target) | number | 8 | | popoverLeft | left property of popover | string | "0px" | | popoverTop | top property of popover | string | "0px" | | popoverAnimation | popover animation name | string | "flip-y" | | popoverAnimationDuration | popover animation duration | string | "400ms" | | popoverAnimationFunction | popover animation timing function | string | "ease" | | onStepStart | the callback function when step start | (step:Step,index:number) => void | - | | onStepExit | the callback function when step exit | (step:Step,index:number) => void | - | | payload | step payload | any | - |