Clojure Q&A - Recent questions tagged react

MUI Select - add deselect function

Wed, 13 Dec 2023 11:43:41 +0000

(defn- menu-item
  [value-fn label-fn state lang index item]
(let [value (value-fn item)
    label (label-fn item lang)]
^{:key index}
[:> m/MenuItem {:value   value
                :data-cy (-> (str value) (str/lower-case) (str/replace " " "-") (str "-menu-item"))}
 [:> m/Checkbox {:checked (= (value-fn state) value)}]
 [:> m/Typography {} label]
 ]))

(defn select
  [{:keys [data state-fn disabled? label value-fn label-fn data-cy variant]}]
  (let [rf-lang   (rf/subscribe [:current-language])
        label-fn1 (or label-fn (fn [item lang] (value-fn item)))]
    (fn [{:keys [data state-fn disabled? label value-fn data-cy variant]}]
      (let [lang  @rf-lang
            state (state-fn)
            props (cond->
                    {:select      true
                     :full-width  true
                     :SelectProps {:MenuProps    {:getContentAnchorEl nil}
                                   :render-value (fn [items]
                                               (if label-fn
                                                 (label-fn state lang)
                                                 (map identity items)))
                               :data-cy      data-cy}
                 :value       (or (value-fn state) "")
                 :on-change   (fn [e]
                                (let [selected (.. e -target -value)]
                                  (state-fn (first (filter #(= selected (value-fn %)) data)))))
                 :label       (i18n/translation label lang)
                 :disabled    disabled?}
                variant (assoc :variant variant))]
    [:> m/TextField props (map-indexed (partial menu-item value-fn label-fn1 state lang) data)]))))

I have the following piece of code to create a dropdown list with items that have a checkbox next to them. The problem is that the checkbox cannot be removed. When the user clicks on an already selected checkbox, nothing happens. And in this case, it should become deselect.

Are there any active projects to enable incremental static regeneration for server-rendered cljs/React?

Mon, 18 Apr 2022 20:28:39 +0000

Modern React frameworks like Next.js allow for incremental static regeneration of pages (https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration). I’ve looked at projects like Rum which do server-side rendering directly via the JVM, and have seen thheller’s proof of concept for using cljs directly with Next (https://github.com/thheller/next-cljs).

Are there any efforts to enable incremental static regeneration for clj/cljs servers with a JVM-based backend? Or, have there been any efforts beyond thheller’s proofs of concept with Gatsby and Next to make an extremely-thin wrapper/compiler library for cljs + React designed explicitly to work well with existing Node.js frameworks?

Any good resource to learn React with ClojureScript

Wed, 02 Sep 2020 15:14:37 +0000

I have experience with react using JavaScript. My company uses ClojureScript React, so just trying to find some good resource. I have googled but did not find any clear answer.

Figwheel/shadow-cljs hot reloading

Tue, 30 Jul 2019 07:47:26 +0000

Is there a way to re-render only the affected parts of the app on hot reload?

Figwheel docs says only about re-mounting the whole app (in which case you lose all the local state of components): https://figwheel.org/docs/hot_reloading.html#re-rendering-ui-after-saving-a-file

Haven't found anything on that matter in shadow-cljs docs. All the apps I've seen so far either not re-render on hot reload at all or do the re-mount.

So, what are the obstacles with comparing pre- and post- hot reload VDOMs and updating the DOM based on this diff? Or is it already implemented?

While Figwheel/shadow-cljs are independent of React/VDOM, that's expected that they don't implement such behaviour, but maybe there's some lib or well-defined approach to do so?