This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
- # announcements (5)
- # beginners (40)
- # cider (3)
- # clara (7)
- # cljs-dev (2)
- # cljsrn (4)
- # clojure (13)
- # clojure-spec (24)
- # clojure-uk (4)
- # clojurescript (3)
- # cursive (6)
- # data-science (3)
- # datomic (53)
- # emacs (3)
- # figwheel-main (11)
- # fulcro (37)
- # lein-figwheel (17)
- # off-topic (13)
- # parinfer (1)
- # re-frame (9)
- # reagent (2)
- # remote-jobs (7)
- # shadow-cljs (75)
- # tools-deps (4)
- # yada (16)
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:
Normally you would want to avoid side-effects in your subscriptions, but as long as
(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)
resize-fnis 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 https://re-com.day8.com.au/ 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: https://github.com/imatic/re-frame-form. It doesn't do much, it's just collection of common events, subscriptions, ... useful with forms.
Repository has example of a form: https://imatic.github.io/re-frame-form/#!/example.core, source can be found here: https://github.com/imatic/re-frame-form/blob/e4f2ca430dc83e3e9d78402c4dddee3a8ddb9480/examples/re-frame-form/src/example/core.cljs#L39.
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: https://github.com/nenadalm/Warehouse/blob/721b17f24cc545e44a5bbb101d69f13f203a339e/frontend/src/warehouse/pages/list/views.cljs#L81. I usually create
app.form namespace, where I put some helper functions, components for creating forms, like: https://github.com/nenadalm/Warehouse/blob/721b17f24cc545e44a5bbb101d69f13f203a339e/frontend/src/warehouse/form.cljs#L8.
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): https://github.com/Day8/re-frame/blob/master/docs/External-Resources.md#forms.
@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 (https://clojurescript.org/guides/webpack) and then I have namespace in my project that converts react components into reagent components highly inspired by: https://github.com/DaveWM/reagent-material-ui/tree/master/src/reagent_material_ui.