Are there best practices to use react-joyride?

[irfandyj]

Are there any best practices to use this?

This is my first time using tour guide library, also my first-time posting a discussion here. I have checked that it seems react-joyride lacked of this. Even other libraries seems lacking too. I'm using react-joyride because of npmtrends.com says that it's the most used. And well, I thought with the power of the community comes with more samples and etc.

Other than that, do you guys need help with the docs, or anything like that? I don't mind helping in my free time if so. If so, what kind of help are you looking for?

[gilbarbara]

Hey @jippy89

Did you check the examples in the demo and the documentation?
From my perspective, the demo covers most cases. Did you have any problems setting it up?

[irfandyj]

Hi @gilbarbara, thanks for the reply and great work you done!
Sorry, my bad for not specifying what I needed. When I was talking about this I was thinking of 2 things.

1. [✅ SOLVED] Lacking examples.
   I'm not aware of the examples in the footer section. After looking again, I think it's covered pretty much complete.
   Thanks for creating good examples!

But on the side note, I wasn't able to skim that. Maybe just use the menu at top or on the side? But that's just my feedback. If everyone had no problems at all. Then it should be no worries. I mean even I eventually found it.

2. Best Practices.
   Let's say I have a Page component (I follow Atomic Design Pattern) and it has 800 lines, what would be the best idea to add guide to this? That's the kind of discussion I wanted to start.

I can think of a custom hook which manages all the needed state for react-joyride to work, and under the MyPage directory, it can be called something like useMyPageGuide.js. And for the one that goes multiple route, just have a separate modules on (idk right now this is a random example) src/guides/ directory.

But I wanted to be more open, and hear what others had to say about this. That's why I created this discussion.

[irfandyj]

Oh yea, I forgot to point out why should I use a custom hook. It's because the MyPage component already has 800 lines, it would be much more unreadable to add the guide's function. Therefore it's better to separate the code. But that's just what I thought.