lt

logix-tour

Guide users through your most important features

Showing:

Popularity

Downloads/wk

5

GitHub Stars

1

Maintenance

Last Commit

6yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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;

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial