JavaScripting

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


  • ×

    React Joyride

    Create walkthroughs and guided tours for your app
    Filed under 

    • 🔾64%Overall
    • 2,300
    • 2.5 days
    • 🕩299
    • 👥9

    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

    Setup

    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">
            <Joyride
              steps={steps}
              ...
            />
            ...
          </div>
        );
      }
    }
    

    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:

    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:

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

    Start coding! 🎉

    Show All