Numeric Production Mechanism

    logix-tour

    0.3.4 • Public • Published

    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;

    Install

    npm i logix-tour

    DownloadsWeekly Downloads

    4

    Version

    0.3.4

    License

    MIT

    Last publish

    Collaborators

    • logixbomb