https://github.com/javierbyte/react-tour

Create nice step-by-step intros with React. [unmaintained]
https://github.com/javierbyte/react-tour

Last synced: 2 months ago
JSON representation

Create nice step-by-step intros with React. [unmaintained]

• Host: GitHub
• URL: https://github.com/javierbyte/react-tour
• Owner: javierbyte
• Created: 2015-07-10T04:23:56.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-07-10T08:05:57.000Z (almost 10 years ago)
• Last Synced: 2025-04-01T22:09:35.309Z (3 months ago)
• Language: JavaScript
• Homepage: http://javier.xyz/react-tour/
• Size: 850 KB
• Stars: 30
• Watchers: 3
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# [React Tour](http://javierbyte.github.io/react-tour/)

React component that help you create nice step-by-step intros.

[![react-tour](/assets/react-tour.gif)](http://javierbyte.github.io/react-tour/)

[Live demo](http://javierbyte.github.io/react-tour/)

# Installation

    npm install react-tour --save

# Usage

    var ReactTour = require('react-tour');

    // [...]

    var ReactTourConfig = [{

      node: React.findDOMNode(this.refs.step1),

      text: 'This is the step 1'

    }, {

      node: React.findDOMNode(this.refs.step2),

      text: 'This is the step 2'

    }, {

      node: React.findDOMNode(this.refs.step3),

      text: 'This is the step 3'

    }];

    // [...]

    }

      visible={}

      showDots={} />

### Don't forget to add styles!

    @import url(node_modules/react-tour/dist/style.css);

# Props

* `config`: An array that contain the steps of the tour. Each step can have a `node` and `text` properties that contains the dom node to focus and the help text to display.

* `currentStep`: Integer. The current step to display.

* `showDots`: Bool. Show progress dots?

* `visible`: Bool. Is the component visible?