tour-with-react

tour guide that uses shepherd for react

Install

npm install --save tour-with-react

Usage

import React, { Component } from 'react'
import {TourGuide } from 'tour-with-react';


class ClassName extends Component {
  render () {
    return (
      <TourGuide {...props} />
      {this.props.children}
    )
  }
}

Props

steps : Array - Required
confirmCancel : boolean
confirmCancelMsg : string
defaultStepOptions : object
tourName : string
useModalOverlay : boolean
theme : object
text: string

Important

The steps prop is the only prop that is required. Steps prop should take an array of steps.

Example of steps -

const steps = [
    {
        id: 'Tour Test',
        options: {
            title: 'Test',
            text:  'This is a test of tour guide',
            attachTo: '.test bottom',
            buttons: [
                {
                  type: 'back',
                  text: 'Back'
                }, {
                  type: 'next',
                  text: 'Next'
                }
              ]
        }
    }
]

Theme example for styling your start tour button

const theme = {
  display: 'inline-block',
  borderRadius: '3px',
  padding: '0.5rem 0',
  margin: '0.5rem 1rem',
  width: '11rem',
  background: 'transparent',
  color: 'white',
  border: '2px solid black',,
}

export default class App extends Component {
  render () {
    return (
      <div className = 'test'>
        <TourGuide defaultStepOptions={stepOptions} steps={steps} useModalOverlay={false} text={'Button Text'} theme={theme}/>
      </div>
    )
  }

Dependencies

styled-components  -  npm install --save styled-components 
shepherd js        -  npm install --save shepherdjs 

License

MIT © williejay2017