I am trying to make reagent work with react-chartist but miserably fail

I am trying to re create the first example here

https://fraserxu.me/react-chartist/

like that:

(def test-data  {:labels ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
:series [[12, 9, 7, 8, 5],      [2, 1, 3.5, 7, 3],[1, 3, 4, 5, 6]]})  

¦[:> rc {:data test-data :type "Line"}]

to only get from the console :

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

soundsl ike rc isn’t a component

@lilactown so the problem is my limited knowledge of shadow-cljs ?

shouldnt (:require ["react-chartist" :as rc] be enought

?

it depends on how react-chartist is packaged

you can try logging the value and see what it actually is

(js/console.log rc)

yes i tried that

is an fn

let me check again

hm

well, the other thing I notice is that your test-data is clojure data structures

e.g. maps, vectors

but react-chartist probably expects JS objects and vectors

i presumed that reagent knows how to convert it

I think that reagent does a shallow conversion of the props

i think this is indicative from the examples

one level deep shouldn't be enought ?

for vectors ?

{default: ƒ, esModule: true}

it seems that i dont import it correctly

is an object

try changing it to (:require ["react-chartist" :default rc]

never seen :default before

shadow-cljs has a special import syntax for ES modules that have a default export

I don’t think it’s standard

ok it works

thanks

I should have noticed it before

🙂

otherwise you’d have to do (:require ["react-chartist" :as rc] and then elsewhere,

(def ChartlistGraph (.-default rc))

;; use ChartlistGraph component

goog.object/get probably works on getting the default

yep that too

It would be good if :import worked on theese things

but as far as i know is only for goog namespaces

thanks @lilactown you have been most helpfull

your welcome! 🙂

Hi, all. Is there no :on-resize event handler available for Reagent components?

In this component click works fine, but when I resize the div, :on-resize does not fire.

The previous component is actually the :reagent-render of a form-3 component. Inside it I have gotten hold of the dom-node using reagent.core/dom-node and tried attaching an event listener like below, but that does not fire either.

Any help appreciated. What I’m working on is an updatable, resizable D3 force visualisation. Everything works, but I just need to hook up the listener that will call my resize function. Note that the purpose of the resize is to make the SVG larger to fit more content, not scale it, so I’m not looking for SVG viewBox + preserveAspectRatio.

Looks like I will be using :on-mouse-up instead. Then I can have D3 re-render after the resizing has completed.

Is there a reagent library for virtual scrolling of a grid? (similar to: https://github.com/bvaughn/react-virtualized)

I don’t believe so

which version of react reagent uses?

Guys, i am developing a SPA which will be like an “admin dashboard”, it would be very good to be able to use one of the already made templates avaliable on the internet, but most of them rely on Redux or some other thing like webpack due to images and css imports, so i can’t integrate them on the project because i want to use re-frame and stick with babel + shadow-cljs in order to import the jsx files

Someone here already had some experience like this before?

That won’t work out with shadow-cljs as far as I know. But you can use we pack with Figwheel as described in the Figwheel manual