React Joyride

https://docs.react-joyride.com/
Admin
React Joyride is a library that allows developers to create guided tours for their React...
Tokens:6,868
Snippets:22
Trust Score:7.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Basic React Joyride Tour Implementation

Source: https://context7.com/context7/react-joyride/llms.txt

Demonstrates a simple React Joyride tour with multiple steps targeting specific elements on the page. This implementation starts automatically and showcases basic step configuration.

```tsx
import React from 'react';
import Joyride from 'react-joyride';

const steps = [
  {
    target: '.my-first-step',
    content: 'This is my awesome feature!',
  },
  {
    target: '.my-other-step',
    content: 'This another awesome feature!',
  },
  {
    target: '.my-third-step',
    content: 'Click this button to submit your data.',
    placement: 'right',
  },
];

export default function App() {
  return (
    <div>
      <Joyride steps={steps} />
      <div className="my-first-step">Feature 1</div>
      <div className="my-other-step">Feature 2</div>
      <button className="my-third-step">Submit</button>
    </div>
  );
}
```

--------------------------------

### Install React Joyride using npm

Source: https://docs.react-joyride.com/index

This command installs the react-joyride package, which is the primary dependency for creating user tours in your React application. Ensure you have Node.js and npm installed on your system.

```bash
npm i react-joyride
```

--------------------------------

### React Joyride Component with Custom Styles

Source: https://docs.react-joyride.com/styling

An example React component demonstrating the integration of the Joyride tour. It includes defining tour steps and applying custom styles through the `styles` prop, which allows modification of tour elements like the overlay, beacon, and text. The `run` state controls the tour's visibility.

```tsx
import React, { useState } from 'react';
import Joyride, { ACTIONS, EVENTS } from 'react-joyride';
const steps = [
  {
    target: '.my-first-step',
    content: 'This is my awesome feature!',
  },
  {
    target: '.my-other-step',
    content: 'This another awesome feature!',
  },
];

export default function App() {
  const [run, setRun] = useState(false);

  const handleClickStart = () => {
    setRun(true);
  };

  return (
    <div>
      <Joyride
        run={run}
        steps={steps}
        styles={{
          options: {
            arrowColor: '#e3ffeb',
            backgroundColor: '#e3ffeb',
            overlayColor: 'rgba(79, 26, 0, 0.4)',
            primaryColor: '#000',
            textColor: '#004a14',
            width: 900,
            zIndex: 1000,
          },
        }}
      />
      <button onClick={handleClickStart}>Start</button>
      // Your code here...
    </div>
  );
}
```

--------------------------------

### Basic React Joyride Tour Implementation

Source: https://docs.react-joyride.com/index

This JavaScript code demonstrates the fundamental setup for React Joyride. It shows how to import the component, define tour steps with target elements and content, and integrate the Joyride component into your React application. The `run` prop can be used to control tour initialization.

```javascript
import React, { useState } from 'react';
import Joyride from 'react-joyride';

/*
 * If your steps are not dynamic you can use a simple array.
 * Otherwise you can set it as a state inside your component.
 */
const steps = [
  {
    target: '.my-first-step',
    content: 'This is my awesome feature!',
  },
  {
    target: '.my-other-step',
    content: 'This another awesome feature!',
  },
];

export default function App() {
  // If you want to delay the tour initialization you can use the `run` prop
  return (
    <div>
      <Joyride steps={steps} />
      ...
    </div>
  );
}
```

--------------------------------

### Create Custom React Joyride Beacon Component

Source: https://context7.com/context7/react-joyride/llms.txt

Replace the default tour beacon with a custom component using CSS-in-JS libraries like styled-components or emotion. This example demonstrates creating a pulsating beacon animation. It requires installing and importing the necessary styling libraries.

```tsx
import { forwardRef } from 'react';
import Joyride, { BeaconRenderProps } from 'react-joyride';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';

const pulse = keyframes`
  0% {
    transform: scale(1);
  }
  55% {
    background-color: rgba(255, 100, 100, 0.9);
    transform: scale(1.6);
  }
`;

const Beacon = styled.span`
  animation: ${pulse} 1s ease-in-out infinite;
  background-color: rgba(255, 27, 14, 0.6);
  border-radius: 50%;
  display: inline-block;
  height: 3rem;
  width: 3rem;
`;

const BeaconComponent = forwardRef<HTMLButtonElement, BeaconRenderProps>((props, ref) => {
  return <Beacon ref={ref} {...props} />;
});

const steps = [
  {
    target: '.feature',
    content: 'Custom beacon example',
  },
];

export function App() {
  return (
    <div>
      <Joyride beaconComponent={BeaconComponent} steps={steps} />
      <div className="feature">Feature</div>
    </div>
  );
}
```

--------------------------------

### Controlled React Joyride Tour with State Management

Source: https://context7.com/context7/react-joyride/llms.txt

Shows how to programmatically control the execution of a React Joyride tour using the 'run' prop and React state. This allows for manual tour initiation, for example, via a button click.

```tsx
import React, { useState } from 'react';
import Joyride from 'react-joyride';

const steps = [
  {
    target: '.dashboard',
    content: 'Welcome to your dashboard!',
    disableBeacon: true,
  },
  {
    target: '.analytics',
    content: 'View your analytics here.',
  },
];

export default function App() {
  const [run, setRun] = useState(false);

  const handleClickStart = () => {
    setRun(true);
  };

  return (
    <div>
      <Joyride
        run={run}
        steps={steps}
        continuous={true}
        showSkipButton={true}
        showProgress={true}
      />
      <button onClick={handleClickStart}>Start Tour</button>
      <div className="dashboard">Dashboard Content</div>
      <div className="analytics">Analytics Content</div>
    </div>
  );
}
```

--------------------------------

### Advanced Event Handling with Constants in React

Source: https://context7.com/context7/react-joyride/llms.txt

This example shows how to handle specific tour events using provided constants for precise control flow in React Joyride. It utilizes the 'callback' prop and various constants like EVENTS, LIFECYCLE, ACTIONS, and STATUS to manage tour progression and user interactions.

```tsx
import React, { useState } from 'react';
import Joyride, {
  ACTIONS,
  EVENTS,
  LIFECYCLE,
  ORIGIN,
  STATUS,
  CallBackProps
} from 'react-joyride';

const steps = [
  { target: '.step1', content: 'Step 1' },
  { target: '.step2', content: 'Step 2' },
];

export default function App() {
  const [run, setRun] = useState(true);

  const handleJoyrideCallback = (data: CallBackProps) => {
    const { action, index, origin, status, type, lifecycle } = data;

    // User closed with ESC key
    if (action === ACTIONS.CLOSE && origin === ORIGIN.KEYBOARD) {
      console.log('User pressed ESC to close');
    }

    // Step completed
    if (type === EVENTS.STEP_AFTER && lifecycle === LIFECYCLE.COMPLETE) {
      console.log(`Completed step ${index}`);
    }

    // Target element not found
    if (type === EVENTS.TARGET_NOT_FOUND) {
      console.error(`Target not found for step ${index}`);
    }

    // Beacon clicked
    if (type === EVENTS.BEACON && lifecycle === LIFECYCLE.INIT) {
      console.log('Beacon clicked');
    }

    // Tour finished or skipped
    if (status === STATUS.FINISHED) {
      console.log('Tour finished');
      setRun(false);
    } else if (status === STATUS.SKIPPED) {
      console.log('Tour skipped');
      setRun(false);
    }
  };

  return (
    <div>
      <Joyride
        callback={handleJoyrideCallback}
        run={run}
        steps={steps}
        continuous={true}
        debug={true}
      />
      <div className="step1">Step 1</div>
      <div className="step2">Step 2</div>
    </div>
  );
}
```

--------------------------------

### Example Callback Data Structures for React Joyride

Source: https://docs.react-joyride.com/callback

These TypeScript objects illustrate the data structure received by the `callback` prop in React Joyride. They represent different tour states, actions, and events, including initialization, updates, and step progression. The structure includes details like action type, current step index, lifecycle status, and step information.

```typescript
{
  action: 'start',
  controlled: true,
  index: 0,
  lifecycle: 'init',
  origin: null,
  size: 4,
  status: 'running',
  step: { /* the current step */ },
  type: 'tour:start'
}
```

```typescript
{
  action: 'update',
  controlled: true,
  index: 0,
  lifecycle: 'beacon',
  origin: null,
  size: 4,
  status: 'running',
  step: { /* the current step */ },
  type: 'beacon'
}
```

```typescript
{
  action: 'next',
  controlled: true,
  index: 0,
  lifecycle: 'complete',
  origin: null,
  size: 4,
  status: 'running',
  step: { /* the current step */ },
  type: 'step:after'
}
```

--------------------------------

### Default Joyride Options Configuration

Source: https://docs.react-joyride.com/styling

Defines the default configuration object for Joyride tour options. This object controls various visual aspects of the tour, such as colors, sizes, and z-index. These defaults can be overridden by passing a custom `styles` prop to the Joyride component.

```javascript
const defaultOptions = {
  arrowColor: '#fff',
  backgroundColor: '#fff',
  beaconSize: 36,
  overlayColor: 'rgba(0, 0, 0, 0.5)',
  primaryColor: '#f04',
  spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',
  textColor: '#333',
  width: undefined,
  zIndex: 100,
};
```

--------------------------------

### Import React Joyride Constants (TypeScript)

Source: https://docs.react-joyride.com/constants

This snippet demonstrates how to import various constants from the 'react-joyride' library. These constants are used to manage the state and lifecycle of Joyride tours, particularly within callback events. Ensure 'react-joyride' is installed as a dependency.

```typescript
import Joyride, { ACTIONS, EVENTS, LIFECYCLE, ORIGIN, STATUS } from 'react-joyride';
```

--------------------------------

### Advanced React Joyride Step Configuration

Source: https://context7.com/context7/react-joyride/llms.txt

Demonstrates advanced configuration options for React Joyride steps, including placement, offsets, spotlight padding, and behavior like hiding footers or fixing tooltips. This allows for highly customized tour experiences.

```tsx
import React from 'react';
import Joyride, { Step } from 'react-joyride';

const steps: Step[] = [
  {
    target: '.header',
    content: 'This is the header',
    placement: 'bottom',
    disableBeacon: true,
  },
  {
    target: '.sidebar',
    content: 'Navigate through menu items here',
    placement: 'right-start',
    offset: 20,
    spotlightPadding: 15,
  },
  {
    target: 'body',
    content: 'This is a centered modal tooltip',
    placement: 'center',
    hideFooter: true,
  },
  {
    target: '.settings',
    content: 'Customize your preferences',
    placement: 'left',
    title: 'Settings Panel',
    isFixed: true,
  },
];

export default function App() {
  return (
    <div>
      <Joyride
        steps={steps}
        continuous={true}
        scrollToFirstStep={true}
        scrollOffset={20}
        disableOverlayClose={true}
      />
      <div className="header">Header</div>
      <div className="sidebar">Sidebar</div>
      <div className="settings">Settings</div>
    </div>
  );
}
```

--------------------------------

### React Component Usage of React Joyride with Callback

Source: https://docs.react-joyride.com/callback

This React component demonstrates how to integrate React Joyride and utilize its `callback` prop to manage tour state. It includes setting up tour steps, handling callback data for navigation and state updates, and initiating the tour. Dependencies include React, `useState`, and React Joyride components and constants.

```tsx
import React, { useState } from 'react';
import Joyride, { ACTIONS, EVENTS, ORIGIN, STATUS, CallBackProps } from 'react-joyride';

const steps = [
  {
    target: '.my-first-step',
    content: 'This is my awesome feature!',
  },
];

export default function App() {
  const [run, setRun] = useState(false);
  const [stepIndex, setStepIndex] = useState(0);

  const handleJoyrideCallback = (data: CallBackProps) => {
    const { action, index, origin, status, type } = data;

    if (action === ACTIONS.CLOSE && origin === ORIGIN.KEYBOARD) {
      // do something
    }

    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      // Update state to advance the tour
      setStepIndex(index + (action === ACTIONS.PREV ? -1 : 1));
    } else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      // You need to set our running state to false, so we can restart if we click start again.
      setRun(false);
    }

    console.groupCollapsed(type);
    console.log(data); //eslint-disable-line no-console
    console.groupEnd();
  };

  const handleClickStart = () => {
    setRun(true);
  };

  return (
    <div>
      <Joyride callback={handleJoyrideCallback} run={run} stepIndex={stepIndex} steps={steps} />
      <button onClick={handleClickStart}>Start</button>
      // Your code here...
    </div>
  );
}
```

--------------------------------

### Basic React Joyride Step Object

Source: https://docs.react-joyride.com/step

A fundamental step configuration requires only the 'target' CSS selector and the 'content' string for the tooltip body. This is the minimum viable configuration for a step.

```javascript
{
  target: '.my-selector',
  content: 'This is my super awesome feature!'
}
```

--------------------------------

### Control React Joyride Programmatically

Source: https://context7.com/context7/react-joyride/llms.txt

Manage the Joyride tour flow imperatively using the `getHelpers` prop. This prop provides access to methods like `go`, `skip`, and `reset` to control the tour's progression based on user actions or application state. It's useful for creating custom navigation controls.

```tsx
import React, { useState } from 'react';
import Joyride, { CallBackProps, StoreHelpers } from 'react-joyride';

const steps = [
  { target: '.step1', content: 'First step' },
  { target: '.step2', content: 'Second step' },
  { target: '.step3', content: 'Third step' },
];

export default function App() {
  const [helpers, setHelpers] = useState<StoreHelpers>();

  const handleJoyrideCallback = (data: CallBackProps) => {
    console.log('Tour status:', data.status);
  };

  const getHelpers = (storeHelpers: StoreHelpers) => {
    setHelpers(storeHelpers);
  };

  const goToStep = (index: number) => {
    helpers?.go(index);
  };

  const skipTour = () => {
    helpers?.skip();
  };

  const resetTour = () => {
    helpers?.reset(true);
  };

  return (
    <div>
      <Joyride
        callback={handleJoyrideCallback}
        getHelpers={getHelpers}
        steps={steps}
        continuous={true}
      />
      <button onClick={() => goToStep(0)}>Go to Step 1</button>
      <button onClick={() => goToStep(2)}>Go to Step 3</button>
      <button onClick={skipTour}>Skip Tour</button>
      <button onClick={resetTour}>Reset Tour</button>
      <div className="step1">Step 1</div>
      <div className="step2">Step 2</div>
      <div className="step3">Step 3</div>
    </div>
  );
}
```

--------------------------------

### Create Custom React Joyride Tooltip Component

Source: https://context7.com/context7/react-joyride/llms.txt

Develop a fully custom tooltip UI for React Joyride, giving complete control over layout and styling. The `tooltipComponent` prop accepts a React component that receives props for rendering navigation buttons (back, skip, next) and tour content. This approach offers maximum flexibility in presentation.

```tsx
import Joyride, { TooltipRenderProps } from 'react-joyride';

function CustomTooltip(props: TooltipRenderProps) {
  const {
    backProps,
    closeProps,
    continuous,
    index,
    primaryProps,
    skipProps,
    step,
    tooltipProps
  } = props;

  return (
    <div className="tooltip__body" {...tooltipProps}>
      <button className="tooltip__close" {...closeProps}>
        &times;
      </button>
      {step.title && <h4 className="tooltip__title">{step.title}</h4>}
      <div className="tooltip__content">{step.content}</div>
      <div className="tooltip__footer">
        <button className="tooltip__button" {...skipProps}>
          {skipProps.title}
        </button>
        <div className="tooltip__spacer">
          {index > 0 && (
            <button className="tooltip__button" {...backProps}>
              {backProps.title}
            </button>
          )}
          {continuous && (
            <button className="tooltip__button tooltip__button--primary" {...primaryProps}>
              {primaryProps.title}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

const steps = [
  { target: '.step1', content: 'Step 1', title: 'Getting Started' },
  { target: '.step2', content: 'Step 2', title: 'Next Steps' },
];

export function App() {
  return (
    <div>
      <Joyride tooltipComponent={CustomTooltip} steps={steps} continuous={true} />
      <div className="step1">Step 1</div>
      <div className="step2">Step 2</div>
    </div>
  );
}
```

--------------------------------

### React Joyride Callback Event Handling

Source: https://context7.com/context7/react-joyride/llms.txt

Illustrates how to handle callback events from React Joyride to track tour progress and user interactions. This includes managing step index and detecting tour completion or skipping.

```tsx
import React, { useState } from 'react';
import Joyride, { ACTIONS, EVENTS, STATUS, CallBackProps } from 'react-joyride';

const steps = [
  {
    target: '.feature-a',
    content: 'This is Feature A',
  },
  {
    target: '.feature-b',
    content: 'This is Feature B',
  },
];

export default function App() {
  const [run, setRun] = useState(false);
  const [stepIndex, setStepIndex] = useState(0);

  const handleJoyrideCallback = (data: CallBackProps) => {
    const { action, index, status, type } = data;

    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      setStepIndex(index + (action === ACTIONS.PREV ? -1 : 1));
    } else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      setRun(false);
      console.log('Tour completed or skipped');
    }

    console.log('Joyride Event:', { action, index, status, type });
  };

  return (
    <div>
      <Joyride
        callback={handleJoyrideCallback}
        run={run}
        stepIndex={stepIndex}
        steps={steps}
        continuous={true}
      />
      <button onClick={() => setRun(true)}>Start Tour</button>
      <div className="feature-a">Feature A</div>
      <div className="feature-b">Feature B</div>
    </div>
  );
}
```

--------------------------------

### Interactive Spotlight Mode in React

Source: https://context7.com/context7/react-joyride/llms.txt

This snippet demonstrates how to enable spotlight clicks for interactive elements during a React Joyride tour. It uses the 'spotlightClicks' prop to allow users to interact with specific targets while the tour is active.

```tsx
import React from 'react';
import Joyride from 'react-joyride';

const steps = [
  {
    target: '.form-input',
    content: 'You can type in this field while the tour is active',
    spotlightClicks: true,
    disableOverlayClose: true,
  },
  {
    target: '.submit-button',
    content: 'Click this button to submit (you can interact with it!)',
    spotlightClicks: true,
    spotlightPadding: 20,
  },
];

export default function App() {
  const handleSubmit = () => {
    console.log('Form submitted during tour!');
  };

  return (
    <div>
      <Joyride
        steps={steps}
        continuous={true}
        disableOverlayClose={true}
      />
      <input className="form-input" type="text" placeholder="Type here" />
      <button className="submit-button" onClick={handleSubmit}>
        Submit
      </button>
    </div>
  );
}
```

--------------------------------

### Customize React Joyride Styles

Source: https://context7.com/context7/react-joyride/llms.txt

Apply custom visual styles to the Joyride tour elements using the `styles` prop. This allows for adjustments to colors, sizes, and positioning of tour components like arrows, backgrounds, and spotlights. No external libraries are required for basic styling.

```tsx
import React from 'react';
import Joyride from 'react-joyride';

const steps = [
  {
    target: '.feature',
    content: 'Check out this feature!',
  },
];

export default function App() {
  return (
    <div>
      <Joyride
        steps={steps}
        styles={{
          options: {
            arrowColor: '#e3ffeb',
            backgroundColor: '#e3ffeb',
            beaconSize: 36,
            overlayColor: 'rgba(79, 26, 0, 0.4)',
            primaryColor: '#000',
            spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',
            textColor: '#004a14',
            width: 400,
            zIndex: 1000,
          },
        }}
      />
      <div className="feature">Feature Content</div>
    </div>
  );
}
```

--------------------------------

### Custom Beacon Component with styled-components in React

Source: https://docs.react-joyride.com/custom-components

Demonstrates how to create a custom beacon component using styled-components in React. This component receives props and allows for advanced styling, such as animations, to visually represent tour steps. It requires `react-joyride` and `styled-components`.

```tsx
import { forwardRef } from 'react';
import Joyride, { BeaconRenderProps } from 'react-joyride';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';

const pulse = keyframes`
  0% {
    transform: scale(1);
  }

  55% {
    background-color: rgba(255, 100, 100, 0.9);
    transform: scale(1.6);
  }
`;

const Beacon = styled.span`
  animation: ${pulse} 1s ease-in-out infinite;
  background-color: rgba(255, 27, 14, 0.6);
  border-radius: 50%;
  display: inline-block;
  height: 3rem;
  width: 3rem;
`;

const BeaconComponent = forwardRef<HTMLButtonElement, BeaconRenderProps>((props, ref) => {
  return <Beacon ref={ref} {...props} />;
});

export function App() {
  return (
    <div>
      <Joyride
        beaconComponent={BeaconComponent}
        // ...
      />
    </div>
  );
}
```

--------------------------------

### Custom Tooltip Component with CSS Classes in React

Source: https://docs.react-joyride.com/custom-components

Shows how to create a custom tooltip component using CSS classes in React for React Joyride. This allows for full control over the tooltip's appearance and behavior, including navigation buttons. It requires the `react-joyride` library.

```tsx
import Joyride, { TooltipRenderProps } from 'react-joyride';

function CustomTooltip(props: TooltipRenderProps) {
  const { backProps, closeProps, continuous, index, primaryProps, skipProps, step, tooltipProps } = 
    props;

  return (
    <div className="tooltip__body" {...tooltipProps}>
      <button className="tooltip__close" {...closeProps}>
        &times;
      </button>
      {step.title && <h4 className="tooltip__title">{step.title}</h4>}
      <div className="tooltip__content">{step.content}</div>
      <div className="tooltip__footer">
        <button className="tooltip__button" {...skipProps}>
          {skipProps.title}
        </button>
        <div className="tooltip__spacer">
          {index > 0 && (
            <button className="tooltip__button" {...backProps}>
              {backProps.title}
            </button>
          )}
          {continuous && (
            <button className="tooltip__button tooltip__button--primary" {...primaryProps}>
              {primaryProps.title}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

export function App() {
  return (
    <div>
      <Joyride
        tooltipComponent={CustomTooltip}
        // ...
      />
    </div>
  );
}
```

--------------------------------

### React Joyride Component Props

Source: https://docs.react-joyride.com/props

This section outlines the various props that can be passed to the React Joyride component to control its behavior and appearance.

```APIDOC
## React Joyride Component Props

### Description
Configuration options for the React Joyride component.

### Method
N/A (Component Props)

### Endpoint
N/A (Component Props)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
(Component Props are passed directly to the component)

- **beaconComponent** (ElementType<BeaconRenderProps>) - Optional - A React component to use instead of the default Beacon.
- **callback** (() => CallBackProps) - Optional - A function to be called when Joyride's state changes.
- **continuous** (boolean) - Optional - Default: `false`. Play the tour sequentially with the Next button.
- **debug** (boolean) - Optional - Default: `false`. Log Joyride's actions to the console.
- **disableCloseOnEsc** (boolean) - Optional - Default: `false`. Disable closing the tooltip on ESC.
- **disableOverlay** (boolean) - Optional - Default: `false`. Don't show the overlay.
- **disableOverlayClose** (boolean) - Optional - Default: `false`. Don't close the tooltip when clicking the overlay.
- **disableScrolling** (boolean) - Optional - Default: `false`. Disable autoscrolling between steps.
- **disableScrollParentFix** (boolean) - Optional - Default: `false`. Disable the fix to handle "unused" overflow parents.
- **floaterProps** (Partial<FloaterProps>) - Optional - Options to be passed to react-floater.
- **getHelpers** ((helpers: StoreHelpers) => void) - Optional - Get the store methods to control the tour programmatically (prev, next, go, close, skip, reset, info).
- **hideBackButton** (boolean) - Optional - Default: `false`. Hide the Back button.
- **hideCloseButton** (boolean) - Optional - Default: `false`. Hide the Close button.
- **locale** (Locale) - Optional - Default: `{ back: 'Back', close: 'Close', last: 'Last', next: 'Next', nextLabelWithProgress: 'Next (Step {step} of {steps})', open: 'Open the dialog', skip: 'Skip' }`. The strings used in the tooltip.
- **nonce** (string) - Optional - A nonce value for inline styles (Content Security Policy - CSP).
- **run** (boolean) - Optional - Default: `true`. Run/stop the tour.
- **scrollDuration** (number) - Optional - Default: `300`. The duration for scroll to element.
- **scrollOffset** (number) - Optional - Default: `20`. The scroll distance from the element scrollTop value.
- **scrollToFirstStep** (boolean) - Optional - Default: `false`. Scroll the page for the first step.
- **showProgress** (boolean) - Optional - Default: `false`. Display the tour progress in the next button.
- **showSkipButton** (boolean) - Optional - Default: `false`. Display a button to skip the tour.
- **spotlightClicks** (boolean) - Optional - Default: `false`. Allow mouse and touch events through the spotlight.
- **spotlightPadding** (number) - Optional - Default: `10`. The padding of the spotlight.
- **stepIndex** (number) - Optional - Setting a number here will turn Joyride into `controlled` mode.
- **steps** (Array<Step>) - **Required** - The tour's steps.
- **styles** (Partial<Styles>) - Optional - Override the styling of the Tooltip.
- **tooltipComponent** (ElementType<TooltipRenderProps>) - Optional - A React component to use instead of the default Tooltip.

### Request Example
```jsx
<Joyride
  steps={[
    // ... your steps here
  ]}
  continuous
  run={true}
  locale={{ skip: 'Exit' }}
/>
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

--------------------------------

### Customize Button Labels with Localization in React

Source: https://context7.com/context7/react-joyride/llms.txt

This snippet demonstrates how to customize button labels and text for internationalization in React Joyride tours. It utilizes the 'locale' prop to provide translated strings for navigation buttons.

```tsx
import React from 'react';
import Joyride from 'react-joyride';

const steps = [
  { target: '.feature1', content: '¡Esta es la característica 1!' },
  { target: '.feature2', content: '¡Esta es la característica 2!' },
];

export default function App() {
  return (
    <div>
      <Joyride
        steps={steps}
        continuous={true}
        showSkipButton={true}
        showProgress={true}
        locale={{
          back: 'Atrás',
          close: 'Cerrar',
          last: 'Último',
          next: 'Siguiente',
          nextLabelWithProgress: 'Siguiente (Paso {step} de {steps})',
          open: 'Abrir el diálogo',
          skip: 'Saltar',
        }}
      />
      <div className="feature1">Característica 1</div>
      <div className="feature2">Característica 2</div>
    </div>
  );
}
```
Tokens:
Raw