The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    React Joyride

    Create walkthroughs and guided tours for your app
    Filed under 

    • 🔾65%Overall
    • 2,537
    • 3.4 days
    • 🕩309
    • 👥10

    React Joyride

    Joyride example image

    Create awesome tours for your app!

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

    It uses react-floater for positioning and styling.
    And you can use your own components too!

    View the demo here

    Read the docs

    Chat about it in our Spectrum community


    npm i react-joyride

    Getting Started

    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 (
          <div className="app">


    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:

    npm install
    npm link # link your local repo to your global packages
    npm run watch # build the files and watch for changes

    Now clone and run:

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

    Start coding! 🎉

    Show All