DOCSEARCHbyAlgolia
Submit Docs

reactour

repository·main·Indexed 26 days ago

https://github.com/elrumordelaluz/reactour

A suite of tools for building guided product tours in React applications. It includes a main tour orchestrator via TourProvider and the useTour hook, along with specialized components for masking the UI (Mask) and displaying positioned popover content (Popover).

Tokens
19.6K
Snippets
51
Records
124
Agent score
82%

What's inside reactour

  1. Overview of Reactour packages

    main

    Reactour is a library designed to create guided tours for React applications. It consists of several specialized packages that can be used together or independently:

    • @reactour/tour: The primary package for orchestrating tours. It uses an array of steps to highlight specific parts of your application.
    • @reactour/mask: A customizable component used to highlight specific elements or areas of the viewport.
    • @reactour/popover: A customizable component used to attach content to a specific element or viewport position.
    • @reactour/utils: A collection of helper functions used across the Reactour ecosystem.

  5. Disable element interaction

    main

    Use disableInteraction to prevent users from clicking or interacting with the highlighted element. This is useful for forcing users to follow the tour steps.

    • Global Disable: Set disableInteraction={true} on the TourProvider.
    • Step-specific Override: Use the stepInteraction prop on a specific step to re-enable interaction for that step.
    • Custom Interaction Handling: If disableInteraction is active, you can use onClickHighlighted on the TourProvider to handle clicks on the highlighted area manually.
    <TourProvider
  steps={steps}
  disableInteraction
  onClickHighlighted={(e, clickProps) => {
    console.log('No interaction at all')
    if (clickProps.currentStep < 2) {
      e.stopPropagation()
      event.preventDefault()
      clickProps.setCurrentStep(
        Math.min(clickProps.currentStep + 1, clickProps.steps.length - 1)
      )
    }
  }}
>
  {/* ... */}
</TourProvider>

  6. Set up the TourProvider

    main

    Wrap your application root with the TourProvider component and provide a steps array. Each step object defines the element to highlight using a selector and the text to display via content.

    import { TourProvider } from '@reactour/tour'

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

ReactDOM.render(
  <TourProvider steps={steps}>
    <App />
  </TourProvider>,
  document.getElementById('root')
)

  7. Modify pages and API routes

    main

    The application uses a file-based routing system:

    • React Pages: Edit pages/index.js to modify the main landing page. Changes will trigger an automatic update in the browser.
    • API Routes: Files located in the pages/api directory are treated as API endpoints. For example, pages/api/hello.js is accessible at /api/hello.

  9. Configure the TourProvider

    main

    To enable the tour functionality, wrap your application root with the TourProvider component. You must pass a steps array to the provider, where each step defines a selector (the CSS selector of the element to highlight) and content (the text or component to display in the popover).

    import { TourProvider } from '@reactour/tour'

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

ReactDOM.render(
  <TourProvider steps={steps}>
    <App />
  </TourProvider>,
  document.getElementById('root')
)

  12. Set up TourProvider

    main

    To use Reactour, wrap your application (or a specific part of the component tree) with the TourProvider. You must pass a steps array to the provider, where each step defines a selector (the CSS selector of the element to highlight) and content (the text or component to display in the popover).

    import { TourProvider } from '@reactour/tour'

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

ReactDOM.render(
  <TourProvider steps={steps}>
    <App />
  </TourProvider>,
  document.getElementById('root')
)