Package Exports

react-joyride

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-joyride) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Joyride

View the demo here.

Install

npm install --save react-joyride

var react = require('react/addons');
var joyride = require('react-joyride').Mixin;

var App = React.createClass({
  mixins: [React.addons.PureRenderMixin, joyride],
  ...
});

This mixin changes state often so you should use React.addons.PureRenderMixin in your components as well.

Styles

If your are using SCSS:

@include 'react-joyride/lib/styles/react-joyride'

Or include this directly in your html:

<link rel="stylesheet" href="react-joyride/lib/styles/react-joyride.css" type="text/css">

Getting Started

Add steps to your tour after your component is mounted.

this.joyrideAddSteps([{...}])]

Start the tour with:

this.joyrideStart()

Options

joyrideLocale (object): The strings used in the tooltip. Defaults to { close: 'Close', last: 'Last', next: 'Next' }
joyrideScrollToSteps (bool): Scroll the page to the next step if needed. Defaults to true
joyrideShowBackdrop (bool): Display a backdrop with holes above your steps. Defaults to true
joyrideTooltipOffset: (number) The tooltip offset from the target. Defaults to 30
joyrideType (string): The type of your presentation. It can be guided (played sequencially with the Next button) or single. Defaults to guided
joyrideCompleteCallback (function): It will be called after an user has completed all the steps in your tour and passes all steps. Defaults to undefined
joyrideStepCallback (function): It will be called after each step and passes the completed step. Defaults to undefined

You can change these in componentWillMount. All optional.

Example:

componentWillMount: function () {
    this.setState({
        joyrideLocale: {
            close: 'Close',
            last: 'Last',
            next: 'Next'
        },
        joyrideStepCallback: function(step) {
            console.log(step);
        },
        joyrideCompleteCallback: function(steps) {
            console.log(steps);
        }
        ...
    });
}

API

this.joyrideAddSteps(steps, [start])

Add steps to your tour. You can call this method multiple times even after the tour has started.

steps {object|array} - Tour's steps
start {boolean} - Starts the tour right away (optional)

this.joyrideAddSteps([
    {
        title: "", //optional
        text: "...",
        selector: "...",
        position: "..."
    },
    ...
]);

this.joyrideStart(autorun)

Call this method to start the tour if it wasn't already started with this.joyrideAddSteps()

autorun {boolean} - Starts the tour with the first tooltip opened.

this.joyrideGetProgress()

Retrieve the current progress of your tour. The object returned looks like this:

{
    index: 2,
    percentageComplete: 50,
    step: {
        title: "...",
        text: "...",
        selector: "...",
        position: "..."
    }
}}

Step Syntax

There are 4 usable options but you can pass extra parameters.

title: The title of the tooltip (optional)
text: The tooltip's body (required)
selector: The target DOM selector of your step (required)
position: Relative position of you beacon and tooltip. It can be one of these: right, left, top, top-left, top-right, bottom, bottom-left, bottom-right and center. This defaults to top.