A minimalistic ClojureScript interface to React.js
dgb23 2020-12-23T13:35:40.413300Z

this announcement is potentially interesting to #reagent #fulcro #re-frame and others who build on react.


@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
                   surname]} data]
       [:li {:style    (if (= selected-person (get by-id id))
             :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")
             :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?

p-himik 2020-12-23T21:43:03.416100Z

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

p-himik 2020-12-23T22:05:38.416500Z

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?

p-himik 2020-12-23T22:11:16.417700Z

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

p-himik 2020-12-23T22:14:39.418500Z

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.

achikin 2020-12-23T22:21:11.421500Z

Just came across Reagent 1.0.0 and looking at the @juhoteperi 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)?

p-himik 2020-12-24T08:46:30.424400Z

If those packages don't require their users to use hooks then you can use them as is with no problems.

juhoteperi 2020-12-24T09:10:42.424600Z

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.

juhoteperi 2020-12-24T09:12:38.424800Z

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 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



p-himik 2020-12-23T22:24:38.422200Z

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.

achikin 2020-12-23T22:28:26.422400Z

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.

p-himik 2020-12-23T22:32:10.422800Z

Right, just wanted to mention just in case.


it was :on-blur thanks @p-himik 😄