Skip to content

Instantly share code, notes, and snippets.

@pesterhazy
Last active January 19, 2023 11:31
Show Gist options
  • Save pesterhazy/4d9df2edc303e5706d547aeabe0e17e1 to your computer and use it in GitHub Desktop.
Save pesterhazy/4d9df2edc303e5706d547aeabe0e17e1 to your computer and use it in GitHub Desktop.
Using ref functions with reagent
;; React supports "refs" as a way for a component to get a
;; handle to its children. Classically, refs were string-based.
;; Recent versions of React support callback attributes as a
;; more elegant variant of accessing DOM notes or components.
;;
;; This example uses a Form-3 component as per
;; https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components
;;
;; For callback refs, see React's documentation
;; https://facebook.github.io/react/docs/more-about-refs.html
(defn my-component []
(let [!ref (atom nil)]
(r/create-class
{:display-name "feed-ui"
:component-did-update
(fn []
(some-> @!ref .focus))
:reagent-render
(fn []
[list-view {:ref (fn [com] (reset! !ref com))
;; more attributes..
}])})))
@jsonmurphy
Copy link

This was very useful. Thanks!

@assoc-in
Copy link

Awesome! Worked great for getting access to methods for react native components such as the clear function for TextInput!

@LeaveNhA
Copy link

Thank you!

@euporos
Copy link

euporos commented Aug 29, 2020

This is pure gold! Showed me how to use the .slickGoTo Method on the React-Slick carousel whenever my state changed accordingly. Cheers!

@siddharthjain-in
Copy link

Awesome! thanks! it helped me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment