This sounds so basic, but I haven't had a need for it so far. I want to scroll to an element, but I can only do that once the element has rendered. How do I check whether it has rendered/fire something when it has rendered?
Form 3 component and use special hooks?
If you mean React hooks then it cannot be a form-3 component and instead must be a function component that you use with :f>.
But it can also be done with form-3, yes.
I'm pretty sure there's a React library for that that provides a component that you use to wrap your own component with, that will call some function when it's rendered. But it's easy enough to do via form-3 that I wouldn't bother with an extra dependency.
Thank you @p-himik 🙂
I wasn't thinking about React hooks. I forget the React nomenclature, tbh, don't spend enough time there.
set a :ref function to the element you want to scroll to, make sure the function is cached (not created on every update), call .scrollIntoView on the DOM node stored in the ref
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
> make sure the function is cached (not created on every update)
Just to add to it - that's only necessary with form-2 or r/with-let. With form-3 and :component-did-mount it should not be necessary.
(defn scroll-to-on-attach [el]
(when el
(.scrollIntoView el #js {:behavior "smooth"})))
(defn my-component []
[:div {:ref scroll-to-on-attach}
"Scroll to me!"])Very nice, thank you 🙌