rc-tour-guide
Best React Tour Guide component for new user.
Screen capture
Development
npm install
npm start
Example
http://localhost:8000/examples/
online example: http://xuqingkuang.github.io/rc-tour-guide/
install
Simple Usage
// use jsx to render html, do not modify simple.html ;;;; const tour = startIndex: 0 scrollToSteps: true steps: text: 'This is the first step in the tour.' selector: '.block' ; const completed = { console;}; const canceled = { console;} { this; } { return <div> <div> <button onClick= { this }> Reset and Show Tour Guide </button> </div> <div className="block"> I am a block text </div> </div> } const TourGuide = Example; ReactDOM;```
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 {} // When be current executor, $target is jquery object {} // 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.