React Joyride

   


#### 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

``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 (



);
}
}
`

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