https://github.com/gilbarbara/react-joyride

Create guided tours in your apps
https://github.com/gilbarbara/react-joyride

joyride react react-component tooltip tour

Last synced: 7 days ago
JSON representation

Create guided tours in your apps

• Host: GitHub
• URL: https://github.com/gilbarbara/react-joyride
• Owner: gilbarbara
• License: mit
• Created: 2015-08-28T02:56:09.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2024-11-20T13:38:38.000Z (5 months ago)
• Last Synced: 2025-04-01T04:25:42.551Z (14 days ago)
• Topics: joyride, react, react-component, tooltip, tour
• Language: TypeScript
• Homepage: https://react-joyride.com/
• Size: 7.92 MB
• Stars: 7,136
• Watchers: 44
• Forks: 557
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-cn - react-joyride - Create guided tours for your apps (Uncategorized / Uncategorized)
• awesome-react-components-all - react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. (Uncategorized / Uncategorized)
• awesome-react-components - react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. (UI Components / Miscellaneous)
• awesome-react - react-joyride - Create guided tours for your apps (Uncategorized / Uncategorized)
• awesome-react - react-joyride - Create guided tours in your apps.  (UI Components / Guided Tours)
• awesome-learning-resources - react-joyride - Create guided tours for your apps (Uncategorized / Uncategorized)
• awesome-github-star - react-joyride
• awesome-list - react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. (Demos / Miscellaneous)
• awesome-react-components - react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. (UI Components / Miscellaneous)
• awesome-react-components - react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. (UI Components / Miscellaneous)
• awesome-react-components - react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. (UI Components / Miscellaneous)
• fucking-awesome-react-components - react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. (UI Components / Miscellaneous)
• awesome-react - react-joyride - Create guided tours in your apps ` 📝 4 months ago` (React [🔝](#readme))
• awesome-react-components - react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. (UI Components / Miscellaneous)
• awesome-react-components - react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. (UI Components / Miscellaneous)

README

        
# React Joyride

[![](https://badge.fury.io/js/react-joyride.svg)](https://www.npmjs.com/package/react-joyride) [![CI](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=coverage)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride)

[![Joyride example image](http://gilbarbara.com/files/react-joyride.png)](https://react-joyride.com/)

#### Create awesome tours for your app!

Showcase your app to new users or explain functionality of new features.

It uses [react-floater](https://github.com/gilbarbara/react-floater) for positioning and styling.  

And you can use your own components too!

**View the demo [here](https://react-joyride.com/)** (or the codesandbox [examples](https://codesandbox.io/s/github/gilbarbara/react-joyride-demo))

**Read the [docs](https://docs.react-joyride.com/)**

Talk about it on the [Discussions board](https://github.com/gilbarbara/react-joyride/discussions).

## Setup

```bash

npm i react-joyride

```

## Getting Started

```jsx

import Joyride from 'react-joyride';

export class App extends React.Component {

  state = {

    steps: [

      {

        target: '.my-first-step',

        content: 'This is my awesome feature!',

      },

      {

        target: '.my-other-step',

        content: 'This another awesome feature!',

      },

      ...

    ]

  };

  render () {

    const { steps } = this.state;

    return (

      


        

        ...

      

    );

  }

}

```


> If you need to support legacy browsers you need to include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill.

---

Sponsored by

[![Frigade](https://files.gilbarbara.dev/media/frigade-sponsor-v2.png)](https://frigade.com/?source=joyride)

React Joyride is proud to be sponsored by [Frigade](https://frigade.com/?source=joyride), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.

---

## Development

Setting up a local development environment is easy!

Clone (or fork) this repo on your machine, navigate to its location in the terminal and run:

```bash

npm install

npm link # link your local repo to your global packages

npm run watch # build the files and watch for changes

```

Now clone https://github.com/gilbarbara/react-joyride-demo and run:

```bash

npm install

npm link react-joyride # just link your local copy into this project's node_modules

npm start

```

**Start coding!** 🎉