Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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!** 🎉