Best React Tour Guide component for new user.
npm install
npm start
http://localhost:8000/examples/
online example: http://xuqingkuang.github.io/rc-tour-guide/
// 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
```js
{
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
}
],
}
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 |
rc-tour-guide is released under the MIT license.