Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@jsonmurphy jsonmurphy commented Nov 22, 2016

This was very useful. Thanks!

@assoc-in

This comment has been minimized.

Copy link

@assoc-in assoc-in commented Apr 25, 2017

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

@LeaveNhA

This comment has been minimized.

Copy link

@LeaveNhA LeaveNhA commented Jun 19, 2019

Thank you!

@euporos

This comment has been minimized.

Copy link

@euporos 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!

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