react-app-tour v0.0.6

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

License

MIT