React-joyride: Do you know how to integrate Joyride with Redux ?

[captainkovalsky]

I just tried to add joyride component and log refs

 <Joyride ref="joyride" steps={[]} debug={true} />

When I log this.refs.joyride I get undefined

I use a redux.

How to properly integrate it with component?

[gilbarbara]

hey,

It's hard to understand without seeing any code but I use Redux with Joyride without problems. Can you log just this.refs? Are you using ES6 classes and binding methods?

[captainkovalsky]

Here is my code

import React, { Component } from 'react'
import Joyride from 'react-joyride';

class Layout extends React.Component {
  constructor(props) {
    super(props);
    //just for example
    const step = {
    title: 'First Step',
    text: 'Start using the <strong>joyride</strong>', // supports html tags
    selector: '.first-step',
    position: 'bottom-left',
    type: 'hover',
    style: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderRadius: '0',
        color: '#fff',
        mainColor: '#ff4456',
        textAlign: 'center',
        width: '29rem',
        beacon: {
            inner: '#000',
            outer: '#000'
        },
        button: {
            display: 'none'
        },
        skip: {
            color: '#f04'
        },
    },
    name: 'my-first-step'
  };
  }

  render() {
    console.log(this.refs.joyride, 'joyride');
    return (
        <div className="layout">
        <Joyride ref="joyride" steps={[]} debug={true} />
        <div className="content">
          {this.props.children}
        </div>
        </div>
        );
    }
}

export default Layout;

console.log prints undefined. Joyride is initialized without any errors.

[gilbarbara]

On the first render, at least, it will be undefined since you haven't added the ref to the component yet..
Try to log it in the componentDidUpdate event..

Take a look at the demo source code to see the usage.

Anyway, Redux is a state container so it won't change the React functionality at all..

[captainkovalsky]

I added steps in the did update and it works fine.

[SunyoungKim508]

@vdzundza Hey if you dont mind, can you share your react-joyride implementation with redux? I dont want to pass addSteps directly to children components, so I am trying to write it in reducer.

[scott-mcnulty]

A bit late to the party but I'll share how I got mine working in case anyone is searching for an example still.

Our implementation was to show different steps based on the page the user is on because in our single page app the help icon was always displayed in the header. To get this working my steps were essentially:

1. Make a global joyride file
2. Dispatch an action when clicking on the help icon to tell joyride it can run and give the route the user is currently on
3. Select steps based on a corresponding regex that pairs with the steps
4. Put the steps into the global joyride file
5. Dispatch an action to tell joyride to not run when the tutorial is over

Not perfect but it works for our app 🙂

I've also made a gist of basic template files to get started