npm package: @rrrapha/reactour
Description: Tourist Guide into your React Components
Author: Lionel T
Latest version: 1.9.5

<p align="center">
  <img alt="Reactour" title="Reactour" src="/logo.svg" width="250">
</p>
<p align="center" style="margin-top: 40px">
  <strong>Tourist Guide</strong> into your React Components
</p>
<p align="center">
  <a href="https://elrumordelaluz.github.io/reactour/">Demo</a>
</p>
<p align="center">
  <a href="https://codesandbox.io/s/6z56m8x18k?module=%2FApp.js">
    <img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit 6z56m8x18k">
  </a>
</p>

This is a fork from: [https://github.com/elrumordelaluz/reactour](https://github.com/elrumordelaluz/reactour)

### Install

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

```
yarn add reactour styled-components
```

<small>From `v1.8.6` [styled-components](https://www.styled-components.com/) it isn't bundled into the package.</small>

### Initialize

Add the `Tour` Component in your Application:

```js
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`        | `() => { 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,
})),
```

### Steps example

```js
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',
    },
  },
  // ...
]
```