React app tour

Easily create a user tour for your responsive react application.

$ npm install react-app-tour --save

Simple usage

import React, { Component } from 'react';
import { Tour } from 'react-app-tour';

class App extends Component {
  render() {
    const steps = {
      1: {
        caretPosition: 'left',
        title: 'step 1',
        text: 'Welcome to step one.',
        top: "45%",
        left: 100
      },
      2: {
        caretPosition: 'right',
        title: 'step 2',
        text: 'This is step two.',
        top: 65,
        left: 20%
      },
      3: {
        caretPosition: 'top-left',
        title: 'step 3',
        text: 'Click \'Finish\' to complete the tour',
        top: 85,
        left: 50
      }
    };
    return (
      <div className="container">
        <Tour active={true} steps={steps} />
      </div>
    );
}

Props

| Name | Type | Default | Description | | ------ | ------ | ------ | ------ | | active*| boolean | [Required] | Show or hide the tour | | steps*| Object | [Required] | Adds individual steps to the tour | | color | string | '#048dbe' | Overwrites the default theme color | | background | string | 'rgba(255, 255, 255, 0.5)' | Overwrites the default background overlay | | zIndex | number | 999 | Overwrites the default z-index of the tour | |nextLabel|string|'Next'| Overwrites the default 'Next-button' text | |finishLabel|string|'Finish'| Overwrites the default 'Finish-button' text | |onFinish|function|-|Fired when the last step has been completed| |onFinish|function|-|Fired when the tour gets closed|

License

MIT