This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-12-23
Channels
- # adventofcode (135)
- # announcements (9)
- # babashka (27)
- # beginners (97)
- # bristol-clojurians (8)
- # calva (7)
- # chlorine-clover (1)
- # cider (3)
- # clara (16)
- # clj-kondo (9)
- # cljdoc (137)
- # clojars (4)
- # clojure (110)
- # clojure-europe (118)
- # clojure-taiwan (8)
- # clojure-uk (19)
- # clojurescript (30)
- # conjure (6)
- # cryogen (32)
- # datomic (11)
- # depstar (1)
- # duct (4)
- # emacs (6)
- # fulcro (73)
- # graalvm (9)
- # keechma (7)
- # leiningen (16)
- # luminus (1)
- # malli (35)
- # meander (3)
- # off-topic (45)
- # pathom (1)
- # pedestal (2)
- # re-frame (3)
- # reagent (31)
- # reitit (2)
- # reveal (17)
- # shadow-cljs (34)
- # tools-deps (11)
- # xtdb (14)
this announcement is potentially interesting to #reagent #fulcro #re-frame and others who build on react. https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
@juhoteperi thanks a lot for you work on reagent. It is extremely useful :)
I have a selectable box declared like:
(defn read-ui [crud-state]
(let [{:person/keys [by-id]
:keys [selected-person]} @crud-state
data (vals by-id)]
[:ul {:style {:list-style-type "none"
:padding 0
:margin 0}}
(for [{:keys [id
name
surname]} data]
[:li {:style (if (= selected-person (get by-id id))
selection-style
{})
:on-click #(swap! crud-state assoc :selected-person (get by-id id))}
[:a {:style (if (= selected-person (get by-id id))
(assoc a-style :color "white")
a-style)
:href "#"}
(str surname ", " name)]])]))
how can I dissoc from :selected-person
when I click outside of this read-ui?
there's a way to do this?
Assuming crud-state
is a regular ratom, you can just swap!
it inside some handler.
In your case, it should be the :on-blur
or the :on-focusout
handler, depending on your React version. I think.
it's a regular atom
You should replace it with a ratom, otherwise the component will not be re-rendered when its value changes.
it's a regular ratom
hahaha srry
:on-focusout #(swap! crud-state dissoc :selected-person)
like this?
on the same component that has :on-click?
Something like this, yes.
Ah, hold on - I might've misunderstood the intent. Do you want to listen for all clicks outside of read-ui
or just for when the focus is lost?
it's tricky
I think it's just for when the focus is lost
Ah, OK. Then it should be the top level :ul
, I think. If it doesn't work, read about how focus/blur events are bubbled - it's been some time, I don't recall much.
didn't worked, but I'll try to read some about focus
Just came across Reagent 1.0.0 https://github.com/reagent-project/reagent/blob/master/CHANGELOG.md#100-2020-12-21 and looking at the @juhoteperi https://github.com/reagent-project/reagent/blob/master/examples/functional-components-and-hooks/src/example/core.cljs I have a question: were functional components introduced only to allow react hooks in reagent components or there any other benefits of using them (apart from custom compiler stuff)?
FWIW I think there are some performance measurements (perhaps, with an older version of Reagent) that show that if you switch the default Hiccup compiler from class-based to function-based components then performance degrades slightly.
Yes, I’ve seen that. I’m trying to imagine some cases where I can get benefits from switching to functional components in my current codebase.
I would switch to it to reuse new packages in JS land.
If those packages don't require their users to use hooks then you can use them as is with no problems.
I should probably make this clearer somewhere in the docs: I think Reagent hooks support is currently useful for interop or "small use". A few hooks like useContext
, useLayoutEffect
could be quite useful used together with RAtoms. But if you want to use Hooks to store the app state and everything. Helix is probably better fit.
And :f>
can be used to make just certain components "functions components" so they work with hooks, no need to switch everything over.
(Yes, this is a bit backwards, you need to turn the component to function component on the use place, instead of where it is defined. I think I had some reason to do it like this...)
Do you think it might be interesting to have a quick example in the doc of interactoin with helix?
I am interested to use this library https://github.com/pmndrs/react-three-fiber and I believe the new functional components will be reallllyyy useful. Would you go with reagent of with helix?