Fork me on GitHub
#rum
<
2020-07-15
>
Karol Wójcik08:07:18

How to mix react higher order component with rum?

Roman Liutikov09:07:25

@karol.wojcik could you post an example?

Karol Wójcik09:07:37

Supposing I got the following function:

(ns css-cljs.shared
  (:require
   [cljs-bean.core :refer [->js]]
   [react-jss :as rcs]))

(defn with-styles
  ([styles]
   (with-styles styles {}))
  ([styles opts]
   (rcs/withStyles (->js styles) (->js opts))))
which using that library https://cssinjs.org/react-jss?v=v10.3.0 Now what I would like to achieve is to wrap the Rum component with Reagent HOC
(ns css-cljs.rum
  (:require
   [css-cljs.shared :as csh]
   [rum.core :as rum]))

(def styles (rum/adapt-class (csh/with-styles {:div {:font-weight "bold"}})))

(rum/defc View
  []
  [:div {} "Hello"])

(rum/mount (styles View) (js/document.getElementById "root"))

Karol Wójcik09:07:56

In reagent it was fairly simple:

(ns css-cljs.reagent
  (:require
   [cljs-bean.core :refer [bean]]
   [reagent.core :as r]
   [css-cljs.shared :as csh]))

(defn- NormalizeStylesheetWrapper
  [component]
  (fn [& args]
    (as-> (first args) opts
      (apply component
             (merge opts {:classes (bean (:classes opts))})
             (rest args)))))

(defn with-styles
  [& args]
  (fn [component]
    (r/adapt-react-class
     ((apply csh/with-styles args)
      (r/reactify-component (NormalizeStylesheetWrapper component))))))

Roman Liutikov09:07:33

I see, thought there's a guide or an example for this in the repo already

Roman Liutikov09:07:58

So since Rum component is a function that takes any number of args, you'd have to wrap it into a function that takes React's js props object and passes what's needed into Rum componnet

Roman Liutikov09:07:15

(rum/defc f [a b c] ...)

(defn f-react [^js props]
  (f (.-a props) (.-b props) (.-c props)))

Roman Liutikov09:07:55

in this example f-react is a React component that acts as interop layer between React and Rum

Karol Wójcik12:07:37

@U0FR82FU1 got something like:

#js {$$typeof #object[Symbol(react.forward_ref)], :render #object[Function], :displayName JssContextSubscriber(Component), :InnerComponent #object[Function]}
How to transform it to React component?

Roman Liutikov14:07:40

that's an instance of react component

Roman Liutikov14:07:15

put it as a child into a receiving component

Karol Wójcik20:07:50

Could you please show the example? I don't follow

Karol Wójcik20:07:35

Ok I think I've figured it out.

(js/React.createElement here-the-thing-ive-posted #js {} nil)

Karol Wójcik13:07:42

Thank you very much @U0FR82FU1

🙏 3