Tour

Here are the examples for the Tour package

Basic example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam eu mauris euismod imperdiet. Nullam elementum fermentum neque a placerat. Vivamus sed dui nisi. Phasellus vel dolor interdum, accumsan eros ut, rutrum dolor. Pellentesque a magna enim. Pellentesque malesuada egestas urna, et pulvinar lorem viverra suscipit.Duis sit amet mauris ante. Fusce at ante nunc. Maecenas ut leo eu erat porta fermentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam eu mauris euismod imperdiet. Vivamus sed dui nisi. Phasellus vel dolor interdum,Ut augue massa, aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales augue. Curabitur in nulla in magna luctus porta et sit amet dolor. Pellentesque a magna enim.

Mask click

<TourProvider 
  onClickMask={({ setCurrentStep, currentStep, steps, setIsOpen }) => {
    if (currentStep === steps.length - 1) {
      setIsOpen(false)  
    }
    setCurrentStep((s) => (s === steps.length - 1 ? 0 : s + 1))
  }}
/>

Close click

<TourProvider 
  onClickClose={({ setCurrentStep, currentStep, steps, setIsOpen }) => {
    if (currentStep === steps.length - 1) {
      setIsOpen(false)  
    }
    setCurrentStep((s) => (s === steps.length - 1 ? 0 : s + 1))
  }}
/>

Disable Keyboard

<TourProvider 
  disableKeyboardNavigation={[esc]}
/>

Scroll smooth

<TourProvider scrollSmooth />

Padding

<TourProvider padding={{ mask: 14, popover: [5, 10], wrapper: 20 }} />

Custom Prev and Next buttons

<TourProvider 
  prevButton={({ currentStep, setCurrentStep, steps }) => {
    const first = currentStep === 0
    return (
      <button
        onClick={() => {
          if (first) {
            setCurrentStep((s) => steps.length - 1)
          } else {
            setCurrentStep((s) => s - 1)
          }
        }}
      >
        Back
      </button>
    )
  }} 
  nextButton={({
    Button,
    currentStep,
    stepsLength,
    setIsOpen,
    setCurrentStep,
    steps,
  }) => {
    const last = currentStep === stepsLength - 1
    return (
      <Button
        onClick={() => {
          if (last) {
            setIsOpen(false)
          } else {
            setCurrentStep((s) => (s === steps?.length - 1 ? 0 : s + 1))  
          }
        }}
      >
        {last ? 'Close!' : null}
      </Button>
    )
  }} 
/>

RTL

Custom styles

Disable Scroll

Custom Badge

Disable dots navigation

Disable interaction

Toggle navigation parts

Starts at specific step

Using Modals

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam eu mauris euismod imperdiet. Nullam elementum fermentum neque a placerat. Vivamus sed dui nisi. Phasellus vel dolor interdum, accumsan eros ut, rutrum dolor. Etiam in leo urna. Vestibulum maximus vitae urna at congue. Vivamus lectus nisi, pellentesque at orci a, tempor lobortis orci. Praesent non lorem erat. Ut augue massa, aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales augue. Curabitur in nulla in magna luctus porta et sit amet dolor. Pellentesque a magna enim. Pellentesque malesuada egestas urna, et pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at ante nunc. Maecenas ut leo eu erat porta fermentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam eu mauris euismod imperdiet. Nullam elementum fermentum neque a placerat. Vivamus sed dui nisi. Phasellus vel dolor interdum, accumsan eros ut, rutrum dolor. Etiam in leo urna. Vestibulum maximus vitae urna at congue. Vivamus lectus nisi, pellentesque at orci a, tempor lobortis orci. Praesent non lorem erat. Ut augue massa, aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales augue. Curabitur in nulla in magna luctus porta et sit amet dolor. Pellentesque a magna enim. Pellentesque malesuada egestas urna, et pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at ante nunc. Maecenas ut leo eu erat porta fermentum.

Autoplay

Disable Actions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam eu mauris euismod imperdiet. Nullam elementum fermentum neque a placerat. Vivamus sed dui nisi. Phasellus vel dolor interdum, accumsan eros ut, rutrum dolor. Etiam in leo urna. Vestibulum maximus vitae urna at congue. Vivamus lectus nisi, pellentesque at orci a, tempor lobortis orci. Praesent non lorem erat. Ut augue massa, aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales augue. Curabitur in nulla in magna luctus porta et sit amet dolor. Pellentesque a magna enim. Pellentesque malesuada egestas urna, et pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at ante nunc. Maecenas ut leo eu erat porta fermentum.


At this point you need to make an action to continue the Tour. Please
Great! Actions are enabled.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam eu mauris euismod imperdiet. Nullam elementum fermentum neque a placerat. Vivamus sed dui nisi. Phasellus vel dolor interdum, accumsan eros ut, rutrum dolor. Etiam in leo urna. Vestibulum maximus vitae urna at congue. Vivamus lectus nisi, pellentesque at orci a, tempor lobortis orci. Praesent non lorem erat. Ut augue massa, aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales augue. Curabitur in nulla in magna luctus porta et sit amet dolor. Pellentesque a magna enim. Pellentesque malesuada egestas urna, et pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at ante nunc. Maecenas ut leo eu erat porta fermentum.

HOC

Content Component