@rrrapha/reactour

Tourist Guide into your React Components

Demo

This is a fork from: https://github.com/elrumordelaluz/reactour

$3

``
npm i --save reactour styled-components
`

`
yarn add reactour styled-components
`

From v1.8.6 styled-components it isn't bundled into the package.

$3

Add the Tour Component in your Application:

`js
import Tour from 'reactour'

class App extends Component {
// ...

render (


)
}

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

$3

| 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 | () => { document.body.style.overflowY = 'hidden' } | |
| onBeforeClose | Function triggered before close | func | () => { document.body.style.overflowY = 'auto' } | |
| 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 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 | |
| showTooltipArrow | Show tooltip arrows pointing to target element | 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 | |

`js
steps: PropTypes.arrayOf(PropTypes.shape({
'follow': PropTypes.bool, // Should the guide follow the element when scrolling
'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,
'maskClickHandler': PropTypes.func,
})),
`

$3

`js
const steps = [
{
selector: '[data-tour="my-first-step"]',
content: ({ goTo, inDOM }) => (



),
position: 'top',
action: node => {
node.focus()
console.log('yup, the target element is also focused!')
},
style: {
backgroundColor: '#bada55',
},
},
// ...
]
``