Tourist Guide into your React Components
⚠️ Themasterbranch is currently in development. Please use the v1 branch to follow the current versions published.
npm i -S reactour
# or
yarn add reactourFrom v1.9.1styled-components it isn't bundled into the package and is required styled-components@^4 and react@^16.3 due to the use of createRef, so:
npm i -S styled-components@^4.0.0
# or
yarn add styled-components@^4.0.0Add the Tour Component in your Application, passing the steps with the elements to highlight during the Tour.
importReactfrom'react'importTourfrom'reactour'classAppextendsComponent{// ...render(<>{/* other stuff */}<Toursteps={steps}isOpen={this.state.isTourOpen}onRequestClose={this.closeTour}/></>)}conststeps=[{selector: '.first-step',content: 'This is my first Step',},// ...]Change
--reactour-accent(defaults to accentColor on IE) css custom prop to apply color in Helper, number, dots, etc
Type: string
Default: #007aff
Configure accessibility related accessibility options
Type: object
Default:
// attribute to associate the dialog with a title for screen readersariaLabelledBy: null,// aria-label attribute for the close buttoncloseButtonAriaLabel: 'Close',// Show/Hide Navigation Dots for screen reader softwareshowNavigationScreenReaders: true,Customize Badge content using
currentandtotalsteps values
Type: func
// example<TourbadgeContent={(curr,tot)=>`${curr} of ${tot}`}/>Content to be rendered inside the Helper
Type: node | elem
Custom class name to add to the Helper
Type: string
Close the Tour by clicking the Mask
Type: bool
Default: true
Disable interactivity with Dots navigation in Helper
Type: bool
Disable the ability to click or intercat in any way with the Highlighted element
Type: bool
Disable all keyboard navigation (next and prev step) when true, disable only selected keys when array
Type: bool | array(['esc', 'right', 'left'])
// example<TourdisableKeyboardNavigation={['esc']}/>Function triggered each time current step change
Type: func
// example<TourgetCurrentStep={curr=>console.log(`The current step is ${curr+1}`)}/>Programmatically change current step after the first render, when the value changes
Type: number
Custom class name to add to the element which is the overlay for the target element when
disableInteraction
Type: string
Tolerance in pixels to add when calculating if an element is outside viewport to scroll into view
Type: number
You know…
Type: bool
Required: true
Change Next button in last step into a custom button to close the Tour
Type: node
// example<TourlastStepNextButton={<MyButton>Done! Let's start playing</MyButton>}/>Custom class name to add to the Mask
Type: string
Extra Space between in pixels between Highlighted element and Mask
Type: number
Default: 10
Renders as next button navigation
Type: node
Overrides default
nextStepinternal function
Type: func
Do something after Tour is opened
Type: func
// example<TouronAfterOpen={target=>(document.body.style.overflowY='hidden')}/>Do something before Tour is closed
Type: func
// example<TouronBeforeClose={target=>(document.body.style.overflowY='auto')}/>Function to close the Tour
Type: func
Required: true
Renders as prev button navigation
Type: node
Overrides default
prevStepinternal function
Type: func
Beautify Helper and Mask with
border-radius(in px)
Type: number
Default: 0
Smooth scroll duration when positioning the target element (in ms)
Type: number
Default: 1
Offset when positioning the target element after scroll to it
Type: number
Default: a calculation to the center of the viewport
Show/Hide Helper Navigation buttons
Type: bool
Default: true
Show/Hide Helper Close button
Type: bool
Default: true
Show/Hide Helper Navigation Dots
Type: bool
Default: true
Show/Hide number when hovers on each Navigation Dot
Type: bool
Default: true
Show/Hide Helper Number Badge
Type: bool
Default: true
Starting step when Tour is open the first time
Type: number
Default: 0
Array of elements to highlight with special info and props
Type: shape
Required: true
steps: PropTypes.arrayOf(PropTypes.shape({'selector': PropTypes.string,'content': PropTypes.oneOfType([PropTypes.node,PropTypes.element,PropTypes.func,]).isRequired,'position':PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number),PropTypes.oneOf(['top','right','bottom','left','center']),]),'action': PropTypes.func,'style': PropTypes.object,'stepInteraction': PropTypes.bool,'navDotAriaLabel': PropTypes.string,})),conststeps=[{selector: '[data-tour="my-first-step"]',content: ({ goTo, inDOM })=>(<div>
Lorem ipsum <buttononClick={()=>goTo(4)}>Go to Step 5</button><br/>{inDOM&&'🎉 Look at your step!'}</div>),position: 'top',// you could do something like:// position: [160, 250],action: node=>{// by using this, focus trap is temporary disablednode.focus()console.log('yup, the target element is also focused!')},style: {backgroundColor: '#bada55',},// Disable interaction for this specific step.// Could be enabled passing `true`// when `disableInteraction` prop is present in TourstepInteraction: false,// Text read to screen reader software for this step's navigation dotnavDotAriaLabel: 'Go to step 4',},// ...]Value to listen if a forced update is needed
Type: string
Delay time when forcing update. Useful when there are known animation/transitions
Type: number
Default: 1
How is implemented the scroll lock behaviour in the Demo?
To guarantee a cross browser behaviour we use body-scroll-lock.
Import the library
import{disableBodyScroll,enableBodyScroll}from'body-scroll-lock'Create the event handlers
disableBody=target=>disableBodyScroll(target)enableBody=target=>enableBodyScroll(target)Then assign them into the Tour props
<Tour{...props}onAfterOpen={this.disableBody}onBeforeClose={this.enableBody}/>