reagent

reefersleep 2025-03-27T08:25:28.714739Z

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?

reefersleep 2025-03-27T08:26:42.541859Z

Form 3 component and use special hooks?

p-himik 2025-03-27T08:30:00.427419Z

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.

p-himik 2025-03-27T08:30:55.707959Z

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.

reefersleep 2025-03-27T08:42:37.059899Z

Thank you @p-himik 🙂

reefersleep 2025-03-27T08:43:09.479259Z

I wasn't thinking about React hooks. I forget the React nomenclature, tbh, don't spend enough time there.

Roman Liutikov 2025-03-27T09:44:13.326659Z

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

p-himik 2025-03-27T09:45:36.919259Z

> 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.

Roman Liutikov 2025-03-27T09:47:40.008569Z

(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!"])

👍 1
reefersleep 2025-03-27T10:46:05.192929Z

Very nice, thank you 🙌