A fantastic site guide tour written with React

Usage no npm install needed!

<script type="module">
  import reactGuideTour from '';


React Site Tour

An fantastic step-based site tour written with React

Screen Shoot


$ npm install react-guide-tour [--save]

In your project:

var ReactGuideTour = require('react-guide-tour')


import ReactGuideTour from 'react-guide-tour'


ReactDOM.render(<ReactGuideTour ref='rgt' steps={steps} />, document.getElementById('rgt'))


react-guide-tour props

name type default description
steps Array [] Array of guide tour steps
enableAutoPositioning Boolean true If set to false, the modal position specified for every steps will be forced to that, even if there isn't enough space on the window.
Otherwise, the modal will be auto positioned where is enoguh space, or fixed to the bottom of the screen
onTourEnd Function Optional. This prop is a callback for guide tour end or exit. It is called every time the user arrives to the end or exit from the guide tour.

react-guide-tour step object

Each step in props.steps array is an object with these properties

name type default description
selector String/Function Mandatory property. This parameter specifies the object to focus during the guide tour step.
You could specify a String, and it will be used as a jQuery selector.
If you specify a function (it will be triggered in runtime during the guide tour), you must return a valid DOM element (not a jquery one)
In the first case, i suggest the use of custom tags to select your elements, like:
<p data-rgt='firstStep'>Title</p>
{selector: '[data-rgt=firstStep]'} or {selector: () => {return $('[data-rgt=firstStep]')[0]}}
image String Mandatory property. This parameter is the image link on this step. The image size is 256X192 and on the last step the size is 296X204.
message String Mandatory property. This parameter is the string content of your guide tour modal step. It's your business to handle internationalization by passing the right translation to the step
modalPosition String 'top' Optional parameter. It could be a value from this array
['top', 'bottom', 'left', 'right', 'center']
It represents the position of the modal relative to the focused element of the step
onChange (index) Function Optional property. This parameter is a callback which is called every time the user arrives at this step.
An index parameter is passed to the function representing the current index step in props.steps array passed to the rgt component

react-guide-tour methods

Public methods of rgt

name description
startTour() You call this method when you want to start your guide tour.
Add a ref tag in your ReactGuideTour component like ref='rgt' and call it from your parent component with