\n\n## Install\n\n```zsh\nnpm i -S reactour\n# or\nyarn add reactour\n```\n\nFrom `v1.9.1` [styled-components](https://www.styled-components.com/) it isn't bundled into the package and is required `styled-components@^4` and `react@^16.3` due to the use of [createRef](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs), so: \n\n```zsh\nnpm i -S styled-components@^4.0.0\n# or\nyarn add styled-components@^4.0.0\n```\n\n## Sponsored by\n\n#### Gold sponsors 🥇\n\n
\n Reactour is proud to be sponsored by Frigade, a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, and more.\n
\n Dopt gives developers UI components and SDKs to build seamless onboarding and education experiences in minutes.\n
\n\n## Usage\n\nAdd the `Tour` Component in your Application, passing the `steps` with the elements to highlight during the _Tour_.\n\n```js\nimport React from 'react'\nimport Tour from 'reactour'\n\nclass App extends Component {\n // ...\n\n render (\n <>\n { /* other stuff */}\n \n \n )\n}\n\nconst steps = [\n {\n selector: '.first-step',\n content: 'This is my first Step',\n },\n // ...\n]\n```\n\n### Tour Props\n\n#### accentColor\n\n> Change `--reactour-accent` _(defaults to accentColor on IE)_ css custom prop to apply color in _Helper_, number, dots, etc\n\nType: `string`\n\nDefault: `#007aff`\n\n#### badgeContent\n\n> Customize _Badge_ content using `current` and `total` steps values\n\nType: `func`\n\n```js\n// example\n `${curr} of ${tot}`} />\n```\n\n#### children\n\n> Content to be rendered inside the _Helper_\n\nType: `node | elem`\n\n#### className\n\n> Custom class name to add to the _Helper_\n\nType: `string`\n\n#### closeButtonAriaLabel\n\n> `aria-label` attribute for the close button (for accessibility)\n\nType: `string`\n\nDefault: `'Close'`\n\n#### closeWithMask\n\n> Close the _Tour_ by clicking the _Mask_\n\nType: `bool`\n\nDefault: `true`\n\n#### disableDotsNavigation\n\n> Disable interactivity with _Dots_ navigation in _Helper_\n\nType: `bool`\n\n#### disableInteraction\n\n> Disable the ability to click or intercat in any way with the _Highlighted_ element\n\nType: `bool`\n\n#### disableKeyboardNavigation\n\n> Disable all keyboard navigation (next and prev step) when true, disable only selected keys when array\n\nType: `bool | array(['esc', 'right', 'left'])`\n\n```js\n// example\n\n```\n\n#### getCurrentStep\n\n> Function triggered each time current step change\n\nType: `func`\n\n```js\n// example\n console.log(`The current step is ${curr + 1}`)}\n/>\n```\n\n#### goToStep\n\n> Programmatically change current step after the first render, when the value changes\n\nType: `number`\n\n#### highlightedMaskClassName\n\n> Custom class name to add to the element which is the overlay for the target element when `disableInteraction`\n\nType: `string`\n\n#### inViewThreshold\n\n> Tolerance in pixels to add when calculating if an element is outside viewport to scroll into view\n\nType: `number`\n\n#### isOpen\n\n> You know…\n\nType: `bool`\n\nRequired: `true`\n\n#### lastStepNextButton\n\n> Change Next button in last step into a custom button to close the Tour\n\nType: `node`\n\n```js\n// example\nDone! Let's start playing} />\n```\n\n#### maskClassName\n\n> Custom class name to add to the _Mask_\n\nType: `string`\n\n#### maskSpace\n\n> Extra Space between in pixels between Highlighted element and _Mask_\n\nType: `number`\n\nDefault: `10`\n\n#### nextButton\n\n> Renders as next button navigation\n\nType: `node`\n\n#### nextStep\n\n> Overrides default `nextStep` internal function\n\nType: `func`\n\n#### onAfterOpen\n\n> Do something after _Tour_ is opened\n\nType: `func`\n\n```js\n// example\n (document.body.style.overflowY = 'hidden')} />\n```\n\n#### onBeforeClose\n\n> Do something before _Tour_ is closed\n\nType: `func`\n\n```js\n// example\n (document.body.style.overflowY = 'auto')} />\n```\n\n#### onRequestClose\n\n> Function to close the _Tour_\n\nType: `func`\n\nRequired: `true`\n\n#### prevButton\n\n> Renders as prev button navigation\n\nType: `node`\n\n#### prevStep\n\n> Overrides default `prevStep` internal function\n\nType: `func`\n\n#### rounded\n\n> Beautify _Helper_ and _Mask_ with `border-radius` (in px)\n\nType: `number`\n\nDefault: `0`\n\n#### scrollDuration\n\n> Smooth scroll duration when positioning the target element (in ms)\n\nType: `number`\n\nDefault: `1`\n\n#### scrollOffset\n\n> Offset when positioning the target element after scroll to it\n\nType: `number`\n\nDefault: a calculation to the center of the viewport\n\n#### showButtons\n\n> Show/Hide _Helper_ Navigation buttons\n\nType: `bool`\n\nDefault: `true`\n\n#### showCloseButton\n\n> Show/Hide _Helper_ Close button\n\nType: `bool`\n\nDefault: `true`\n\n#### showNavigation\n\n> Show/Hide _Helper_ Navigation Dots\n\nType: `bool`\n\nDefault: `true`\n\n#### showNavigationNumber\n\n> Show/Hide number when hovers on each Navigation Dot\n\nType: `bool`\n\nDefault: `true`\n\n#### showNumber\n\n> Show/Hide _Helper_ Number Badge\n\nType: `bool`\n\nDefault: `true`\n\n#### startAt\n\n> Starting step when _Tour_ is open the first time\n\nType: `number`\n\n#### steps\n\n> Array of elements to highligt with special info and props\n\nType: `shape`\n\nRequired: `true`\n\n##### Steps shape\n\n```js\nsteps: PropTypes.arrayOf(PropTypes.shape({\n 'selector': PropTypes.string,\n 'content': PropTypes.oneOfType([\n PropTypes.node,\n PropTypes.element,\n PropTypes.func,\n ]).isRequired,\n 'position':PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.number),\n PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'center']),\n ]),\n 'action': PropTypes.func,\n 'style': PropTypes.object,\n 'stepInteraction': PropTypes.bool,\n 'navDotAriaLabel': PropTypes.string,\n 'observe': PropTypes.string,\n 'highlightedSelectors': PropTypes.array,\n 'mutationObservables': PropTypes.array,\n 'resizeObservables': PropTypes.array,\n})),\n```\n\n##### Steps example\n\n```js\nconst steps = [\n {\n selector: '[data-tour=\"my-first-step\"]',\n content: ({ goTo, inDOM }) => (\n
\n Lorem ipsum \n \n {inDOM && '🎉 Look at your step!'}\n
\n ),\n position: 'top',\n // you could do something like:\n // position: [160, 250],\n action: (node) => {\n // by using this, focus trap is temporary disabled\n node.focus()\n console.log('yup, the target element is also focused!')\n },\n style: {\n backgroundColor: '#bada55',\n },\n // Disable interaction for this specific step.\n // Could be enabled passing `true`\n // when `disableInteraction` prop is present in Tour\n stepInteraction: false,\n // Text read to screen reader software for this step's navigation dot\n navDotAriaLabel: 'Go to step 4',\n // Observe direct children DOM mutations of this node\n // If a child is added: the highlighted region is redrawn focused on it\n // If a child is removed: the highlighted region is redrawn focused on the step selector node\n observe: '[data-tour=\"observable-parent\"]',\n // Array of selectors, each selected node will be included (by union)\n // in the highlighted region of the mask. You don't need to add the\n // step selector here as the default highlighted region is focused on it\n highlightedSelectors: ['[data-tour=\"highlighted-element\"]'],\n // Array of selectors, addition/removal of a matching node will trigger a rerender\n // of the mask shape. Useful in combination with highlightedSelectors when highlighted\n // region of mask should be redrawn after a user action\n mutationObservables: ['[data-tour=\"mutable-element\"]'],\n // Array of selectors, each selected node resize will triggered a rerender of the mask shape.\n // Useful in combination with highlightedSelectors when highlighted region of mask should\n // be redrawn after a user action. You should also add the selector in mutationObservables\n // if you want to track DOM addition/removal too\n resizeObservables: ['[data-tour=\"resizable-parent\"]'],\n },\n // ...\n]\n```\n\n#### update\n\n> Value to listen if a forced update is needed\n\nType: `string`\n\n#### updateDelay\n\n> Delay time when forcing update. Useful when there are known animation/transitions\n\nType: `number`\n\nDefault: `1`\n\n#### disableFocusLock\n\n> Disable FocusLock component.\n\nType: `bool`\n\nDefault: `false`\n\n## FAQ\n\n
\n \n How is implemented the scroll lock behaviour in the Demo?\n
\n To guarantee a cross browser behaviour we use body-scroll-lock.
\n
Import the library\n
\nimport { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
![\"Reactour\"](\"/logo.svg\" "\\"Reactour\\""){kind=logo}
\n![\"Edit](\"https://codesandbox.io/static/img/play-codesandbox.svg\")
\n \n![\"Frigade](\"./sponsor-frigade.png\" "\\"Frigade")
\n \n![\"Dopt](\"./sponsor-dopt.png\" "\\"Dopt")
\n \n