Skip to content

xuqingkuang/rc-tour-guide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

React tour guide or introduction for user is first time using.

Resources

License

Stars

Watchers

Forks

Packages

No packages published