@guiderjs/vanilla v0.2.7

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

Step

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