React Product Tour

Easy step-based product tour component written in React Usefull to create websites product tours, webapps tutorial, and every kind of step-based process to explain something in a site

Development status

2015/11/23 Released STABLE Version 1.0.1 on npm

Added: Optional Callback onChange at every step of the product tour Optional Callback onTourEnd at the end of the product Tour

2015/11/23 Released Beta Version 0.1.3 on npm

Added: Prev button to go to the previous step. Skip button to exit the product tour Steps circle icons to navigate through the product tour

2015/11/22 Released Beta Version 0.1.0 on npm

Install

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

In your project:

var ReactProductTour = require('react-product-tour')

or

import ReactProductTour from 'react-product-tour'

then

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

And then include the dist/rpt.css in your HTML file!

Examples

Open examples/ directory and open example1.html with a browser to test the component

API

react-product-tour props

name	type	default	description
steps	Array	[]	Array of product 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 product tour end or exit. It is called every time the user arrives to the end or exit from the product tour.

react-product-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 product 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 product 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-rpt='firstStep'>Title</p> {selector: '[data-rpt=firstStep]'} or {selector: () => {return $('[data-rpt=firstStep]')[0]}}
message	String		Mandatory property. This parameter is the string content of your product 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 RPT component

react-product-tour methods

Public methods of rpt

name	description
startTour()	You call this method when you want to start your product tour. Add a ref tag in your ReactProductTour component like ref='rpt' and call it from your parent component with this.refs['rpt'].startTour()