Fork me on GitHub

Is there a good pattern to handle resize event? Initially I thought about storing the resized data in app-db and have components subscribe to it but then thought just using a reagent atom would be better. Does anybody have an example where they are subscribing to component or window resizing?


@U0W442AH0: I think you are on the right track. I've found using a reagent atom to work better. From a conceptual model, the size of the window is not really app state. For example, you would never want to roll-back the window size if you were rolling back the application state. I've found something like this to work:

(def window-size (r/atom nil)

(f/reg-sub :window/resize
  ;; pass this sub a dom node reference
  (fn [[_ node]]
    [node window-size])
  (fn [[node window-size] _]
    (when node
      (resize-fn node))))

(defn on-window-resize
  (->> (.-innerWidth js/window)
       (reset! window-size)))

;; Call this somewhere in your boot sequence
(.addEventListener js/window "resize" on-window-resize)
Normally you would want to avoid side-effects in your subscriptions, but as long as resize-fn is idempotent and does not mutate app state, this should be fine.


@joost-diepenmaat Cheers. Yeah I came up with a solution that handled CORS requests. :thumbsup::skin-tone-5:


Anyone who used to create a validatable form with inputs?


Hi. I have no experience with re-com, but I am using this library for forms with re-frame: It doesn't do much, it's just collection of common events, subscriptions, ... useful with forms. Repository has example of a form:!/example.core, source can be found here: At work, I am using that library with material-ui. For my toy project, I am just using simple existing html elements directly. My toy project has probably better example: I usually create app.form namespace, where I put some helper functions, components for creating forms, like: Re-frame documentation has links on a few other more ready to use solutions to forms with re-frame (I don't know how much compatible they're with re-com):


@U662GKS3F thank you for the well formulated reply. This is great, I'll look into the library and might also look into material-ui, hopefully its easy to use material-ui. There are much more components in there compared to re-com 🙂


@U662GKS3F do you use any cljs-wrapper for material-ui or do you use it directly?


I am using it directly because there was no wrapper for beta version I was using. I am using webpack to compile it ( and then I have namespace in my project that converts react components into reagent components highly inspired by:

parrot 4

I've solved the problem but it's not pretty