This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-07-15
Channels
- # admin-announcements (1)
- # announcements (8)
- # babashka (6)
- # beginners (70)
- # bristol-clojurians (1)
- # chlorine-clover (15)
- # cider (3)
- # cljs-dev (2)
- # cljsrn (27)
- # clojure (249)
- # clojure-europe (19)
- # clojure-italy (2)
- # clojure-nl (12)
- # clojure-spec (11)
- # clojure-uk (42)
- # clojuredesign-podcast (6)
- # clojurescript (39)
- # community-development (1)
- # conjure (43)
- # cursive (37)
- # data-science (1)
- # datomic (3)
- # duct (16)
- # figwheel-main (23)
- # fulcro (3)
- # instaparse (5)
- # java (5)
- # jobs (1)
- # jobs-discuss (1)
- # malli (11)
- # off-topic (27)
- # re-frame (32)
- # reagent (5)
- # reitit (2)
- # rum (15)
- # shadow-cljs (24)
- # spacemacs (7)
- # sql (5)
- # test-check (3)
- # tools-deps (5)
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))))
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"))
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
@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?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)