Documentation✏️: Show React hook integration example

[josias-r]

Show example how to integrate this library in a react application

[gupta82anish]

hey! Would really appreciate a tutorial for react integration :)
Great job with this library btw

[josias-r]

Hi and thank you!

I currently can't get around to describe an in depth example.

But the basic really just is as simple as creating a new Boarding class instance in a useEffect from a custom hook and returning it as a useState instance.

In that useEffect you can define the steps of the tour (I recommend working with custom data-* attributes to target elements) and them simply start the tour by calling boarding.start() on your custom hook returned object on any button press or user event.

Since BoardingJS evaluates elements live during the tour it should work great in React apps, as is, since elements only need to be available once they are being targeted.

Hope that helps!

[brandongs-MP]

Hello @josias-r

I'm trying to implement in a nextjs/react application but when I change a step it doesn't re-render the component. And i want to show elements based on which step is the user. Can you help me to provide an example or how can I update a react state when boarding.js currentStep changes, please

Also another problem I have is that with Hot reload, a new instance of Boarding is created, is there a way to avoid that?

[josias-r]

Hi @brandongs-MP
If you want your react app to dynamically adjust while stepping trough the tour you can can call your react setState handlers on events like 'onHighlighted', does that solve your issue?

As for the HMR issue, it depends on how you are calling Boarding in your react app. Maybe with useEffect cleanups and a clean useEffect dependency management you can improve the behaviour. HMR has quite some react specific improvements, and with boarding.js being a vanilla library, it is limited in state persistance during HMR updates.