This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-10-05
Channels
- # beginners (46)
- # calva (89)
- # cider (24)
- # clara (7)
- # clj-kondo (36)
- # clojure (33)
- # clojure-australia (4)
- # clojure-dev (9)
- # clojure-europe (15)
- # clojure-israel (1)
- # clojure-nl (1)
- # clojure-uk (13)
- # clojurescript (55)
- # community-development (38)
- # conjure (1)
- # cryogen (12)
- # cursive (16)
- # data-science (4)
- # datomic (39)
- # events (2)
- # fulcro (5)
- # gorilla (3)
- # introduce-yourself (3)
- # jobs (9)
- # kaocha (5)
- # malli (16)
- # music (12)
- # off-topic (11)
- # polylith (4)
- # react (4)
- # reactive (1)
- # reagent (18)
- # remote-jobs (2)
- # reveal (2)
- # sci (4)
- # shadow-cljs (31)
- # timbre (4)
- # tools-build (70)
- # tools-deps (11)
- # vim (33)
- # xtdb (53)
Hello, I'm using the react-scrolling-panel npm module, and one of the components outputs div css="[Object object]"
in the DOM. I'm guessing it has something to do with styled-components. How to make it work in reagent?
When asking such questions, please always provide the relevant code. It's nearly impossible to help otherwise.
Alright.
The relevant code is:
[:> (.. js/scrollingPanel -Container)
{:direction "horizontal"}]
outputs in the DOM to: <div css="{Object object]">
the library is https://openbase.com/js/react-scrolling-panel/documentation
That's 100% not all the relevant code.
Also, don't use js/scrollingPanel
unless you really have to for some reason - instead, use a regular NPM package and regular imports.
This works just fine without any issues:
(ns app.core
(:require [clojure.browser.dom]
[reagent.dom]
["react-scrolling-panel" :refer [Container Panel]]))
(defn app []
[:div {:style {:display :flex}}
[:> Container {:direction :horizontal}
[:> Panel {:flex 1}
"Main Navigation"]
[:> Panel {:flex 3}
"Posts"]]])
(defn ^:export main []
(reagent.dom/render [app] (clojure.browser.dom/get-element :app)))
Oh really
we don't use regular imports in our app, but it's probably not linked, it usually works just fine
oh yeah
just because regular imports weren't a thing when the initial devs started the project
Ah, alright.
FWIW, I'm pretty certain react-scrolling-panel
is just broken. It hasn't been updated in 2 years, which in the modern web development world makes it ancient. And it just assigns css
attributes to React elements - which is not valid in at least modern React.
ah okay, I thought it was a thing with styled-components
or something, but you might be right
Oh the library was made to work with emotion
and requires you to swap React's implementation of createElement
with a different one. But it's not documented at all.
Either way, I would stay away from this library. And it's literally 50 lines of TSX code - you can just rewrite it all in CLJS with no issues.