[Feat] useReveal state hook

[davelsan]

It might be a bit early, but writing this in case you take suggestions at this stage. Feel free to move it to a discussion instead, since this is not an issue.

It might be interesting to expose a useReveal (or whatever name) hook that keeps an up-to-date RevealState object. This is only convenient when slides are kept as separate components, though it's likely the first thing any React developer will do. You already made it easy by exposing the onStateChange prop. Wrapping the RevealSlides children with a regular Context should do the trick.

I'm using this along with framer-motion to have a bit more control over some animations and I found it convenient to have easy access to the state. I don't know a lot about Reveal.js, so maybe there is a more native way to do complex animations.

[bouzidanas]

That's an interesting suggestion.

The package does provide a way to access the Reveal Api directly through the use of the imperativeHandle hook. I believe I called it revealHandle. You should be able to import it from the package and get access to the up-to-date state using this.

It also provides access to all the other Api functions as well. I felt that this solution provided more utility.

[davelsan]

Yes, I see that it's possible to invoke getReveal from the component ref. This is more powerful as it provides a lot more than the state.

However, using the ref is confined to the root component right? This is good if all the slides live in the App root, but pretty much the first thing I did was convert the slides to separate components. In that case I have to provide a context or update a central state myself (which is not a problem, just not very convenient).

I suspect this approach is contrary to what Reveal.js expects, but separating things in components is so central to the React paradigm that I think it merits having a specific hook to access the state, and why not perhaps the full API too.

In @react-three/fiber there is a similar useThree hook, for example, that gives us access to all the Three.js internals (camera, renderer, etc).

EDIT

An alternative solution, depending on the direction you want to take the project. If your idea is to eventually expose a custom Slide (section) component, then it could receive that as props. Though I'm not sure I like that a lot, I've seen it in other projects, especially with React Server Components, where using state hooks is not allowed.

EDIT2

Re-reading your last message maybe you're not talking about passing a ref to RevealSlides? I saw there is a RevealHandle type exported from the package, but as far as I can see it's just the forwardRef type.

[bouzidanas]

I suppose I could add a context provider to the package but I hesitate to go the custom hook route because you can have multiple different reveal instances in a react app and I'd have to figure out how that's going to work out.

Thank you for the suggestions. Hopefully, I will get a chance to explore some of these ideas in the near future.

[davelsan]

Off the top of my head, useContext will always get it's value from the nearest context provider. So multiple instances should be okay, as the hook should just throw outside of the RevealContext.

But no pressure at all, just writing to keep track of ideas. Feel free to close it or move it to a discussion whenever! And thanks for engaging in the discussion 😄