Tourist Guide into your React Components

Demo

Install

npm i --save reactour styled-components

yarn add reactour styled-components

From v1.9.1 styled-components it isn't bundled into the package and is required styled-components@^4 and react@^16.3 due to the use of createRef.

Initialize

Add the Tour Component in your Application:

import Tour from 'reactour'

class App extends Component {
  // ...

  render  (
    <div>
      { /* other stuff */}
      <Tour
        steps={steps}
        isOpen={this.state.isTourOpen}
        onRequestClose={this.closeTour} />
    </div>
  )
}

const steps = [
  {
    selector: '.first-step',
    content: 'This is my first Step',
  },
  // ...
]

PropTypes

Prop	Desc	Type	Default	Is Required
accentColor	Change --reactour-accent color (helper number + dots)	string	#007aff
badgeContent	Function to customize Badge content (current, total) => {}	func
children	Elements to appear after the Mask (need to be styled correctly to have a position and z-index higher than Mask)	`node	elem`	false
className	Custom class to add to the helper	string
closeWithMask	Close clicking the mask	bool	true
disableDotsNavigation	Isn't possible to interact with helper dots	bool
disableInteraction	Isn't possible to interact with highlighted elements	bool
disableKeyboardNavigation	Isn't possible to interact with keyboard arrows	bool
getCurrentStep	Function triggered each time current step change	func	step => { /* 'step' is the current step index */ }
goToStep	Programmatically change current step	number
highlightedMaskClassName	Custom class name for element which is overlaid target element	string
inViewThreshold	Scroll element to show when is outiside viewport adding this threshold value	number
isOpen	You know…	bool		✅
lastStepNextButton	Change Next button in last step into a custom button to close the Tour	node
maskClassName	Custom class to add to the mask	string
maskSpace	Padding between elemente showed and mask	number	10
nextButton	Next navigation button text	node
nextStep	Override default nextStep function to use a custom one	func
onAfterOpen	Function triggered after open	func	target => { /* 'target' is the helper element */ }
onBeforeClose	Function triggered before close	func	target => { /* 'target' is the helper element */ }
onRequestClose	Function triggered to close	func
prevButton	Prev navigation button text	node
prevStep	Override default prevStep function to use a custom one	func
rounded	Beautify helper + mask with border-radius (in px)	number	0
scrollDuration	Smooth scroll duration when positioning the target element	number	1
scrollOffset	Offset when positioning the target element	number	calculates the vertical center of the page
showButtons	Show helper navigation buttons	bool	true
showCloseButton	Show helper close button	bool	true
showNavigation	Show helper navigation dots	bool	true
showNavigationNumber	Show number when hovers on each navigation dots	bool	true
showNumber	Show helper number badge	bool	true
startAt	Starting step each time the Tour is open	number
steps	Array of steps with info and props	[view bellow]		✅
update	Value to listen if a forced update is needed	string
updateDelay	Delay time when forcing update. Useful when there are known animation/transitions	number	1

steps: PropTypes.arrayOf(PropTypes.shape({
  'selector': PropTypes.string,
  'content': PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.element,
    PropTypes.func,
  ]).isRequired,
  'position': PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'center']),
  'action': PropTypes.func,
  'style': PropTypes.object,
  'stepInteraction': PropTypes.bool,
})),

Steps example

const steps = [
  {
    selector: '[data-tour="my-first-step"]',
    content: ({ goTo, inDOM }) => (
      <div>
        Lorem ipsum <button onClick={() => goTo(4)}>Go to Step 5</button>
        <br />
        {inDOM && '🎉 Look at your step!'}
      </div>
    ),
    position: 'top',
    action: node => {
      node.focus()
      console.log('yup, the target element is also focused!')
    },
    style: {
      backgroundColor: '#bada55',
    },
  },
  // ...
]