This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-08-19
Channels
- # announcements (5)
- # beginners (40)
- # cider (3)
- # clara (9)
- # cljs-dev (2)
- # cljsrn (4)
- # clojure (8)
- # 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:
(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 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.

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