search

josias-r / boarding.js

A light-weight, no-dependency, vanilla JavaScript engine to create powerful onboardings and drive the user's focus across the page
https://josias-r.github.io/boarding.js/
MIT License
122 stars 4 forks source link

Documentation✏️: Show React hook integration example #8

Open josias-r opened 1 year ago

josias-r commented 1 year ago

Show example how to integrate this library in a react application

gupta82anish commented 10 months ago

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

josias-r commented 10 months ago

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!