Will this work with React Native?

[wootwoot1234]

Will this work with React Native?

[mparker11]

I'm not using React Native but I have successfully added it to React. I simply created a function that dynamically adds the "data-intro" attr to the components I wanted. Then I called that function in componentDidMount. I hope that helps!

[godd9170]

Hey @mparker11 I too am implementing this into my react app. However because React dynamically adds elements to the DOM, I'm not sure how to have the intro.js wizard go to elements that are generated as a result of a user's interaction.

Have you been able to do this?

[mparker11]

Yes, I have. Going off my first comment, here's the flow:

Below my render method, I added this method (you could probably add it anywhere)

showTour: function() {
        $('#element1').attr('data-intro', 'First step');
        $('#element2').attr('data-intro', 'Second step');
        $('#element3').attr('data-intro', 'Third step');
        //Added more elements
        introJs().start();
    }

Then in componentDidMount(), I simply called this.showTour(). This ensures that whenever your DOM elements load, the tour will initialize itself after. Just make sure to make the call last in componentDidMount().

[godd9170]

Thanks for the suggestion @mparker11. Unfortunately this still doesn't allow for dynamically adding elements depending on user actions.

I was however, able to achieve this thanks to @michalmikolajczyk's suggestion here React's stateful nature.

I too envoke the intoJs tour in the componentDidMount() function, and assign my own onBeforeIntroJsChange() function to the onbeforechange() callback. I also set the introJs tour object in the component's state.

Then, inside my onBeforeIntroJsChange() callback I can dynamically add new steps contingent on the step that just happened, or another component state variable.

This of course works with any of the other IntroJs callbacks (onchange, onafterchange etc) or any other trigger of a component function call.

introJsEnvoke: function() {
      var intro = introJs();
      intro.onbeforechange(this.onBeforeIntroJsChange);
      intro.start();
      this.setState({ introObject : intro });
  },

onBeforeIntroJsChange: function(target) {
   if (target.id === 'step4' && this.state.clicked) {
      var elemNum = 5;
      var elemId = "#step5";
      var intro = this.state.introObject;
      intro._introItems[elemNum].element = document.querySelector(elemId);
   }
  },

[brianinator]

Original question was never answered; issue got off-topic.

[brianinator]

My assumptions it does not or no one tried yet. If it doesn't what are people using instead?

[afshinm]

this is a very basic React wrapper: https://github.com/americanpanorama/panorama/tree/master/src/IntroManager