@ejelome we use that kind of thing extensively with react-native

I think you can also specify multiple styles as a vector

hmm no I'm wrong, at least on react-web that doesn't work

XD

merge is your best bet then

in react-native you only have inline styles anyway

I was hoping there's a more efficient way than merge

I think it's timtowtdi anyway, and most likely I will end up just using classnames

check this out: https://github.com/Project-J/lookbook

for style switching

lookbook uses macros to merge styles at compile time

ahhh

neat

so probably merge with map for multiple sources of styles

thanks @pesterhazy, great addition to my perspective how to do/solve styles 😄

👍

I'd love to see more discussion about Inline Styles in Reagent

also reusable styles

for reusable components

including an additional css file is a hassle (plus global namespace)

I thought he even attempted to compose the massive color list of react native 😂

funny trivia about colors in react native, #0f0 is called lime, and green is #080

hah

@pesterhazy sort of related: I've been using reagent to mount style nodes in the head. Works wonders if you need reactive css, like layouts based on a window size ratom.

so what am I doing wrong?

Warning: Unknown prop `tranform` on <g> tag. Remove this prop from the element. For details, see 
    in g (created by rest_resources_viz.core.viz)
    in svg (created by rest_resources_viz.core.viz)
    in div (created by rest_resources_viz.core.viz)
    in rest_resources_viz.core.viz (created by rest_resources_viz.core.landing)
    in h2 (created by rest_resources_viz.core.landing)
    in rest_resources_viz.core.landing

looks like I cannot specify the transform attribute

Can you show code snippet?

I am a bit rusty sooo 🙂

[:svg {:width width
            :height height}
      [:g {:tranform (str "translate(" (:left margin) "," (:top margin) ")")}]]

oooh

lol there is a typo there 😊

haha typo's are hard, glad you caught it bc i missed it too 😉

I asked this over in #clojurescript, but this might be a better place: Any tips for debugging “Uncaught TypeError: Cannot read property 'getHostNode' of null” in a reagent app?

Reading the React issues, it seems like this is due to React getting into a funky state when previous errors are swallowed using e.g. promises, but I don’t have anything like that, unless reagent uses them internally.

This appears to be due to a checkbox I’m using - does this look ok?

[:input {:type      :checkbox
             :id        :reseller?
             :name      :reseller?
             :checked   (boolean (:reseller? @app-state false))
             :on-change #(swap! app-state update :reseller? not)}]

(very new to reagent, not sure if this is the right way to do things)

I can’t find a lot of good examples of checkbox state handling online.

That error happens when I click the checkbox

:value is unnecessary for checkbox, but I don't think that should cause the problem

No, I’ve updated the snippet to my latest version - not sure what’s going on there.

@cfleming is another component listening to :reseller? in your app?

@gadfly361 I’m not sure what that means, sorry - do you mean using the value of (:reseller? @app-state)?

yeah, is another component using that value?

I ask, because i do not think the checkbox component itself is the problem. However, when it changes :reseller? in your app-state, then something, somewhere else is going wrong

I use that value to hide/show another component with (when (:reseller? @app-state) …), but that component doesn’t directly use the value.

can you show the snipped of that when block

i am guessing the problem is there

Interestingly, clicking the checkbox doesn’t cause the checked state to change, so I suspect something is funky there.

(defn reseller-field []
  [:div
   [:label
    [:input {:type      :checkbox
             :id        :reseller?
             :name      :reseller?
             :checked   (:reseller? @app-state false)
             :on-change #(swap! app-state update :reseller? not)
             :key       :reseller-id}]
    [:span.label-body "Are you a reseller?"]]
   (when (:reseller? @app-state false)
     [:div
      [:label {:for "reseller-id"} "Enter your reseller ID"]
      [:input {:name      "reseller-id"
               :id        "reseller-id"
               :type      "text"
               :class     (str "u-full-width"
                               (when (get-in @app-state [:errors :reseller-id]) " has-error"))
               :value     (:reseller-id-field @app-state "")
               :on-change #(swap! app-state assoc :reseller-id-field (-> % .-target .-value))
               :on-blur   validate-reseller-id-field
               :on-focus  #(clear-error! :reseller-id)}]
      (when-let [error (get-in @app-state [:errors :reseller-id])]
        [:p.error-label error])
      [:p.note "If you do not have a reseller ID, please "
       [:a {:href ""} "contact us"] "."]])])