Clojurians Log v2

How to mix react higher order component with rum?

@karol.wojcik could you post an example?

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))))

(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"))

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))))))

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

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

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

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

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

added a section into docs https://github.com/tonsky/rum/blob/gh-pages/doc/react-interop.md#using-rum-component-in-react

@roman01la got something like:

#js {$$typeof #object[Symbol(react.forward_ref)], :render #object[Function], :displayName JssContextSubscriber(Component), :InnerComponent #object[Function]}

that's an instance of react component

put it as a child into a receiving component

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

Ok I think I've figured it out.

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