interactive-tutorial v1.0.10

Interactive Tutorial

The interactive-tutorial plugin will allow for you to create an interactive tutorial on any page/app. It's easily configured and supports both highlighting areas and adding text in specific directions.

How to use

First, install the package:

npm install --save interactive-tutorial

Now, given the following html:

<div data-id="tutorial-navigation">...</div>
<div data-id="tutorial-signup">...</div>
<div data-id="tutorial-information">...</div>
<div data-id="tutorial-footer">...</div>

Call the package like this:

import InteractiveTutorial from "interactive-tutorial";

InteractiveTutorial({
  options: [
    {
      elementSelector: '[data-id="tutorial-navigation"]',
      text: "This is the main navigation",
      preferredPosition: "bottom",
    },
    {
      elementSelector: '[data-id="tutorial-signup"]',
      text: "This is a signup with a <strong>robot check</strong>",
      preferredPosition: "right",
    },
    {
      elementSelector: '[data-id="tutorial-information"]',
      text: "This is some informative information",
      preferredPosition: "left",
    },
    {
      elementSelector: '[data-id="tutorial-footer"]',
      text: "This is a boring footer",
      preferredPosition: "top",
    },
  ],
  padding: 10,
  textOffsetX: 20,
  textOffsetY: 20,
});

You can use a template as well, if you need some, or all, of your textbox to follow a common design pattern. You declare you template as a general argument (called template) and then use the property templateArgs for the options that wants to use the template. In the example below you can see that an argument is described as {arg} in the template, or {arg?} if you want it to be optional. The arguments can be called anything as long as they are matched by the templateArgs.

Example using a template:

import InteractiveTutorial from "interactive-tutorial";

InteractiveTutorial({
  options: [
    {
      elementSelector: '[data-id="tutorial-footer-link1"]',
      text: "This is a small link",
      preferredPosition: "top",
    },
    {
      elementSelector: '[data-id="tutorial-footer-link2"]',
      preferredPosition: "top",
      templateArgs: { text: "This one uses a template." },
    },
    {
      elementSelector: '[data-id="tutorial-footer-link3"]',
      preferredPosition: "top",
      templateArgs: {
        text: "This one <b>also</b> uses a template.",
        optional: "This one also uses the optional argument.",
      },
  ],
  template: `<p>This is the general template!<p><br /><p>{text}</p><br /><p>It is sometimes useful.</p><br /><p><em>{optional?}</em></p>`,
});

Available options are:

And to style it using the available class selectors:

There is a stylesheet available (which is used in the above demo) which you can import from inside the npm package.

import "./node_modules/interactive-tutorial/build/styles.css";

Working with the code

If you want to contribute or just play around with the code, just download or fork the repository.

To build the project, simply run:

npm install
npm run watch
// or
npm run build

To run the demo project to test your changes you must install the dependencies within the package.

cd demo/
npm install
npm start