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

react-product-tour step object

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

react-product-tour methods

Public methods of rpt