Nanobots Protecting Microbots

    rc-tour-guide

    0.1.0 • Public • Published

    rc-tour-guide


    Best React Tour Guide component for new user.

    NPM version Dependency Status devDependency Status npm download

    Screen capture

    Screen Capture

    Development

    npm install
    npm start
    

    Example

    http://localhost:8000/examples/

    online example: http://xuqingkuang.github.io/rc-tour-guide/

    install

    rc-tour-guide

    Simple Usage

    // use jsx to render html, do not modify simple.html
     
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import tourGuide from 'rc-tour-guide';
    require('rc-tour-guide/assets/index.less');
     
    const tour = {
      startIndex: 0,
      scrollToSteps: true,
      steps: [
        {
          text: 'This is the first step in the tour.',
          selector: '.block'
        }
      ]
    };
     
    const completed = function() {
      console.log('User has completed tour!');
    };
     
    const canceled = function() {
      console.log('User has canceled the tour!');
    }
     
    class Example extends Component {
     
      componentDidMount () {
        this.showTourGuide();
      }
     
      render () {
        return (
          <div>
            <div>
              <button onClick={(evt) => { this.showTourGuide(evt, true) }}>
                Reset and Show Tour Guide
              </button>
            </div>
            <div className="block">
              I am a block text.
            </div>
          </div>
        )
      }
    }
     
    const TourGuide = tourGuide(tour, completed, canceled)(Example);
     
    ReactDOM.render(<TourGuide />, document.getElementById('__react-content'));```

    Options and Defaults

    {
      placement: 'bottom-left',           // Global tooltip appear placement
      maskPadding: 6,                     // Mask border distance with target element
      toolTipOffset: 3,                   // Tooltip distance with mask
      startIndex: 0,                      // Default start tooltip index
      scrollToSteps: true,                // When it enabled it will scroll to target
      enableCloseButton: true,            // Global close button enabled
      locale: {                           // Translations by default it's Chinese
        close: '关闭',
        previous: '上一个',
        next: '下一个',
        done: '完成',
      },
      classNames: {                       // Customize the related element class name
        target: 'rc-tour-guide-target',
        position: 'rc-tour-guide-relative',
      }
      steps: [
        {
          text: 'I am the text',          // Tooltip text
          selector: '.tour-guide-target', // Target css selector
          placement: 'bottom-left',       // Specific tooltip appear placement
          maskPadding: 6,                 // Specific tooltip mask padding
          toolTipOffset: 3,               // As same as global options
          enableCloseButton: true,        // As same as global options
          beCurrent: ($target) => {},     // When be current executor, $target is jquery object
          bePrevious: ($target) => {},    // When be previous executor, $target is jquery object
        }
      ],
    }
     

    Methods

    All of the methods could be called in instance

    Name Arguments Response description
    setTourSteps (steps, callback) After Tour Guide initialized, reset the steps
    getProgress {index, total, percentageComplete, step} Get current step progress
    showTourGuide (evt, reset = false, callback) Show tour guide
    hideTourGuide (evt, reset = false, callback) Hide tour guide
    previousTooltip Go to previous Tooltip
    nextTooltip Go to next Tooltip

    License

    rc-tour-guide is released under the MIT license.

    Install

    npm i rc-tour-guide

    DownloadsWeekly Downloads

    20

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • xuqingkuang