This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-04-28
Channels
- # announcements (11)
- # aws (2)
- # babashka (35)
- # beginners (173)
- # calva (3)
- # chlorine-clover (2)
- # cider (17)
- # clara (2)
- # clj-kondo (28)
- # cljs-dev (11)
- # cljsrn (53)
- # clojure (178)
- # clojure-argentina (1)
- # clojure-europe (12)
- # clojure-germany (5)
- # clojure-italy (4)
- # clojure-nl (5)
- # clojure-spec (25)
- # clojure-uk (88)
- # clojurescript (109)
- # conjure (34)
- # cursive (2)
- # data-science (35)
- # datomic (15)
- # emacs (6)
- # events (1)
- # fulcro (28)
- # graphql (15)
- # helix (21)
- # hoplon (7)
- # jobs (4)
- # jobs-discuss (1)
- # joker (15)
- # lambdaisland (1)
- # lein-figwheel (4)
- # local-first-clojure (1)
- # malli (8)
- # meander (17)
- # off-topic (33)
- # parinfer (2)
- # rdf (16)
- # re-frame (3)
- # reagent (21)
- # reitit (14)
- # remote-jobs (5)
- # ring (8)
- # rum (1)
- # shadow-cljs (184)
- # sql (2)
- # testing (1)
- # tools-deps (23)
FWIW I made some benchmarking between reagent, helix https://clojurians.slack.com/archives/CRRJBCX7S/p1588066976025300
(using latest stable version of reagent 0.10.0, not 1.0.0), config is here https://github.com/krausest/js-framework-benchmark/pull/726/files)
how do you fire an event as soon as the component has loaded, i.e., onComponentMount?
@pshar10 With reagent 1.0.0 you can use functional components and react useState hooks.
Check out Form-3 components https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md
Yeah, as far as I know thatโs the only way to do it, short of rolling your own interop with React and JS.
it's not that bad @pshar10 there are just some pitfalls to be aware of. Use them all the time (for better/worse), ping if you run into trouble
if for some reason you use them inline just remember they need to be wrapped in a vector
I use them with inputs frequently to focus/select on mount, i.e.
(reagent/create-react-class
{:componentDidMount
(fn [this]
(let [node (reagent.dom/dom-node this]
(.select node)
(.focus node)))
:reagent-render
(fn [] [:input])})
if you were to drop that inline, for instance, you would need to do something like
[:form
[:label "blah"]
[(reagent/create-react-class
{:componentDidMount
(fn [this]
(let [node (reagent.dom/dom-node this]
(.select node)
(.focus node)))
:reagent-render
(fn [] [:input])})]]
(note that it is wrapped in a vector)
as opposed to
[:form
[:label "blah"]
;; this won't work
(reagent/create-react-class
{:componentDidMount
(fn [this]
(let [node (reagent.dom/dom-node this]
(.select node)
(.focus node)))
:reagent-render
(fn [] [:input])})]
the other two pitfalls, I suppose, are to access the actual dom node from the lifecycle methods use reagent.dom/dom-node
as indicated in the example and to make sure that your your render method is actually :reagent-render
. If you use :render
it will have intermittent bugs
@goomba This is better I think:
(def foo-bar
(with-meta identity
{:component-did-mount
#((foo-bar))}))
(defn my-component []
[foo-bar
[:div "Foo"]
]
)
Cool! I've never seen that before ๐