This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-02-25
Channels
- # beginners (20)
- # boot (25)
- # cider (1)
- # cljs-dev (7)
- # cljsjs (1)
- # cljsrn (1)
- # clojure (79)
- # clojure-austin (2)
- # clojure-berlin (13)
- # clojure-dusseldorf (1)
- # clojure-germany (7)
- # clojure-russia (10)
- # clojure-serbia (1)
- # clojure-spec (18)
- # clojure-uk (4)
- # clojured (1)
- # clojurescript (90)
- # cursive (10)
- # datomic (7)
- # emacs (14)
- # hoplon (6)
- # luminus (16)
- # lumo (4)
- # numerical-computing (2)
- # om (25)
- # om-next (1)
- # onyx (11)
- # pedestal (10)
- # protorepl (1)
- # reagent (11)
- # remote-jobs (1)
- # ring (1)
- # rum (38)
- # spacemacs (5)
- # test-check (7)
- # untangled (122)
- # vim (1)
- # yada (8)
Howdy! Can anybody point me toward some resources on how interop works with other react components?
more specifically, I’m trying to make use of semantic-ui-react components… although the rum wiki (https://github.com/tonsky/rum/wiki) suggests I should create a function to wrap the createElement call… I don’t know how to use it with rum’s “Hiccup-like” syntax...
(defn create-element [react-comp opts & children]
(apply js/React.createElement react-comp (clj->js opts) children))
(def flipmove* (partial create-element js/FlipMove))
and then you just do (flipmove* {} …)
@martinklepsch Thanks for that! But… it doesn’t seem to work with the sablono markup though… Console says “Uncaught Error: … A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object."
sorry~ been digging a bit through rum and sablono trying to figure out what exactly is being expected in the in the tag position in a [tag attr & children] form...
@odie one reason could be that you accidentally use [flipmove* …]
instead of (flipmove* …)
(flipmove* {:this :are-props} (this-is-a-child-component) (another-one))
that’s roughly how I use it
@odie if you have a snippet of code that demonstrates your issue I can take a look for any obvious misunderstandings
basically, I was trying to mix normal sablono syntax with components from semantic-ui-react…
(rum/defc FriendList-Item < rum/static
[friend-data]
(card {:href (bidi/path-for routes :collab-game-select)}
[:div {:class "image"}
[:img {:src (friend-data "avatarfull")}]]
[:div {:class "content"}
[:div {:class "header"} (friend-data "personaname")]]
… omitted
so card
is a React component. It doesn’t know about Hiccup, Clojurescript datastructures or anything. The only thing it understands is React components.
if you make another component FriendList-Image-And-Content
that contains the stuff after the {:href …}
map then you could pass that to the card
component
invoking (FriendList-Image-And-Content)
will return a react component which can be understood by the card component that you’re using
I just found an approach that works… This is not to take away from all the help you’ve given… I deeply appreciate having someone to talk to while scratching my head over this… anyway… I’ll leave it here in case anybody is having the same issues… x_x
sure, great if you found something thats working
adopted from https://github.com/madvas/cljs-react-material-ui/blob/a2119fdaaf3e8255b6182eb619faf00eb291a5ef/src/cljs_react_material_ui/core.clj Approximately...
(ns app.core
[camel-snake-kebab.core :as cs :include-macros true]
[camel-snake-kebab.extras :refer [transform-keys]])
(def props-kebab->camel->js (comp clj->js (partial transform-keys cs/->camelCase)))
(defn create-mui-cmp
([react-class args]
(let [first-arg (first args)
args (if (or (map? first-arg) (nil? first-arg)) args (cons {} args))]
(apply js/React.createElement react-class
(props-kebab->camel->js (first args)) (rest args))))
([root-obj type args]
(create-mui-cmp (aget root-obj type) args)))
(defn adapt-rum-class [react-class]
(fn [& args]
(let [[opts children] (if (map? (first args))
[(first args) (rest args)]
[{} args])
type# (first children)]
(let [new-children (if (vector? type#)
[(sablono.interpreter/interpret children)]
children)]
(create-mui-cmp react-class (cons opts new-children))))))
(def card (adapt-rum-class js/semanticUIReact.Card))
I guess what’s different is that it uses sablono to evaluate the rest of the children...
I’m surprised a utility like this isn’t already a part of rum… it seems natural to want to pull in external components and still be able to mix it using sablono
incidentally, adapt-rum-class
in the cljs-react-material-ui repo was fixed up by a tonsky recently...
@odie What does this code give you over the alternative I outlined above?
honestly… the solution looks like has more to do with sablono than rum… (now that I’m slightly more informed than I was at the beginning of the day…)
In my book using the extra component is cleaner 😛
alrighty~ this approach gives the user the freedom to choose… 😃 In this case, it’s just a card that represents some info about the user… it’d be strange to think of the “inside” of the card as another component… 😃