\n\n \n\n> ⚠️ The `master` branch is currently in _development_. Please use the [v1 branch](https://github.com/elrumordelaluz/reactour/tree/v1) to follow the current versions published.\n\n \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## 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, { useState } from 'react'\nimport Tour from 'reactour'\n\nconst steps = [\n {\n selector: '.first-step',\n content: 'This is my first Step',\n },\n // ...\n];\n\nconst App = () => {\n const [isTourOpen, setIsTourOpen] = useState(false);\n\n return (\n <>\n { /* other stuff */}\n setIsTourOpen(false)}\n />\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#### accessibilityOptions\n\n> Configure accessibility related accessibility options\n\nType: `object`\n\nDefault:\n```js\n // attribute to associate the dialog with a title for screen readers\n ariaLabelledBy: null,\n // aria-label attribute for the close button\n closeButtonAriaLabel: 'Close',\n // Show/Hide Navigation Dots for screen reader software\n showNavigationScreenReaders: true,\n```\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#### 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#### disableFocusLock\n\n> Disable the ability to set a focus on Input in the _Highlighted_ element\n\nType: `bool`\n\nDefault: `true`\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#### 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\nDefault: `0`\n\n#### steps\n\n> Array of elements to highlight 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})),\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 },\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## 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