Fork me on GitHub
#reagent
<
2021-10-05
>
Quentin Le Guennec09:10:20

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?

p-himik09:10:45

When asking such questions, please always provide the relevant code. It's nearly impossible to help otherwise.

Quentin Le Guennec09:10:32

The relevant code is:

[:> (.. js/scrollingPanel -Container)
        {:direction "horizontal"}]

Quentin Le Guennec09:10:17

outputs in the DOM to: <div css="{Object object]">

p-himik09:10:11

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.

p-himik09:10:04

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

Quentin Le Guennec09:10:25

we don't use regular imports in our app, but it's probably not linked, it usually works just fine

p-himik09:10:41

Ah, hold on. It renders it, but that css attribute is still there.

p-himik09:10:57

Why do you not use regular imports?

Quentin Le Guennec09:10:36

just because regular imports weren't a thing when the initial devs started the project

p-himik09:10:09

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.

Quentin Le Guennec09:10:53

ah okay, I thought it was a thing with styled-components or something, but you might be right

p-himik09:10:30

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.

Quentin Le Guennec09:10:54

Yeah, you're right. Thank you!

👍 1