Clojurians Log v2
reagent
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.
woops
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?
humm
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.
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)?
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?
didn't worked, but I'll try to read some about focus
🙂
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.
Right, just wanted to mention just in case.
it was :on-blur thanks @p-himik 😄