1.1.0 • Published 5 years ago
tour-with-react v1.1.0
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
1.1.0
5 years ago