@lskjs/react-joyride

    2.0.0 • Public • Published

    React Joyride

    Joyride example image

    Create a tour for your app!
    Use it to showcase your app for new users! Or explain functionality of complex features!

    View the demo here

    You can edit the demo here

    If you are looking for the documentation for the old 1.x version, go here

    Setup

    npm i react-joyride@next

    Getting Started

    Just set a steps array to the Joyride component and you're good to go!

    You can use your own component for the tooltip body or beacon, if you want.

    import Joyride from 'react-joyride';
    
    export class App extends React.Component {
      state = {
        run: false,
        steps: [
          {
            target: '.my-first-step',
            content: 'This if my awesome feature!',
            placement: 'bottom',
          },
          {
            target: '.my-other-step',
            content: 'This if my awesome feature!',
            placement: 'bottom',
          },
          ...
        ]
      };
    
      componentDidMount() {
        this.setState({ run: true });
      }
    
      callback = (data) => {
        const { action, index, type } = data;
      };
    
      render () {
        const { steps, run } = this.state;
    
        return (
          <div className="app">
            <Joyride
              steps={steps}
              run={run}
              callback={this.callback}
              ...
            />
            ...
          </div>
        );
      }
    }

    Documentation

    Props

    Step

    Styling

    Callback

    Constants

    Migration from 1.x

    This library uses react-floater and popper.js for positioning and styling.

    Install

    npm i @lskjs/react-joyride

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    216 kB

    Total Files

    30

    Last publish

    Collaborators

    • finalgetname
    • vladik_deniska
    • isuvorov
    • yukioru
    • andru_xa
    • natavts
    • blacklightburn
    • ga2mer
    • iburey
    • kafkae
    • sophiyabezruk