Fork me on GitHub
Ben Hammond19:06:27

I am trying to render the material-ui Vertical Tabs snippet into clojurescript and I am wondering about the correct way to do the prop-types

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.number.isRequired,
    value: PropTypes.number.isRequired,
Is it a with-meta thing sort of like
(ns verticaltabs
   [prop-types :as PropTypes]
(def TabPanel
   (fn [{:keys [value index] :as props} & children]
     (let [displayed (= value index)]
       [:div {:role "tabpanel"
              :hidden (not displayed)
              :id (str "vertical-tabpanel-" index)
              :aria-labelledby (str "vertical-tab-" index)}]
       (when displayed
         [:> Box {:sx #js{:p 3}}
          [:> Typography children]])))
   {:propTypes #js {:index (. (. PropTypes -node) -isRequired)
                    :value (. (. PropTypes -node) -isRequired)
                    :children (. PropTypes -node)}}))
is there a better way?


You don't need propTypes at all, as far I understand.

Ben Hammond19:06:16

I understand its a nice-to-have rather than a must


propTypes is just a property you can assign to a component


however, it looks like you're using reagent. reagent has a special way of storing it's arguments in React props.

Ben Hammond19:06:23

and how would you do that when your component is a function?

Ben Hammond19:06:39

using UIx, but very similiar I think



(defn foo [,,,] ,,,)

(set! (.-propTypes foo) #js {,,,})


not sure how UIx stores props


if you inspect your component using react devtools, you can see how props get passed to your component

👍 1
Ben Hammond20:06:04

oh I hadn't thought of that


e.g. for reagent it stores all the arguments in [my-component foo bar baz] in a single argv prop


and wraps your function in a special wrapper component that will pull out the argv prop and then call your function with it


this makes propTypes basically useless

Ben Hammond21:06:30

so what I would like to think of as props will always be found in the cljs map at index 1 of the vector (.-argv props) and since react/js PropType does not support an XPath type syntax to point at the specfic keys its a non-starter

Ben Hammond21:06:47

and perhaps its not so very useful anywa

Ben Hammond21:06:52

that makes sense

Kent Bull21:07:06

@U793EL04V thank you! this helped me today.

👍 2