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
npm i react-joyrideGetting 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 changesNow 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 startStart coding!
