logiX-tour

A user onboarding library written in pure JavaScript

Currently Supports:

• React
• Theoretically this should work with any require library

Quick Start

 npm install --save logix-tour

Set an indicator by adding a class of {your-prefix}-tour (i.e. my-app-tour)

Set pop up text by adding a [data-tour-text] attribute

Run tour.runMe(prefix) (i.e. tour.runMe('my-app'))

Notes

• Indicators are attached to the container, this can have undesired side effects if the container size and position are not set

Usage In React

  import tour from 'logix-tour';

  class App extends Component {
    componentDidMount() {
      // SET THE "TAP" ANIMATION TO TRUE
      tour.setConfig({ tap: true });
      // CALL "RUN ME" WITH YOUR DESIRED PREFIX
      tour.runMe('mal')
    }
    render() {
      return (
        <div id="My_Awesome_List">
          <ul
            className="mal-tour"
            data-tour-text="Awesome pop up text here"
          >
            <li>Waffles</li>
            <li>Pancakes</li>
            <li>Butter</li>
            <li>Syrup</li>
          </ul>
        </div>
      )
    }
  }

Methods

runMe(prefix, title)

Use this to initialize your onboarding

• prefix

this will run the tour on all elements with a class name of {prefix}-tour

• title

this will set a title for the tour group you are about to run

killTour(prefix)

This will remove all indicators for a particular Group

• prefix

this will remove all indicators that where initialized with the same prefix

setConfig(config_object)

Use this method to set global configs

Current config options

• tap

• dismiss

  import tour from 'logix-tour';

  const config = {
    tap: true, // runs the "tap" animation, defaults to false
    dismiss: function () { console.log('dismiss it'); }, // set a callback to dismiss pop ups
  }

  tour.setConfig(config);

COMING UP

• Angular support
• More config options;