@newhippo/react-joyride
TypeScript icon, indicating that this package has built-in type declarations

2.3.2 • Public • Published

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

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>
    );
  }
}

Package Sidebar

Install

npm i @newhippo/react-joyride

Weekly Downloads

31

Version

2.3.2

License

MIT

Unpacked Size

255 kB

Total Files

29

Last publish

Collaborators

  • thcare-bot
  • nigelzor
  • ye.li
  • psisous