Fork me on GitHub
#reagent
<
2018-12-20
>
heefoo05:12:03

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

heefoo05:12:30

I am trying to re create the first example here

heefoo05:12:19

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

heefoo05:12:48

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

heefoo05:12:40

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.

lilactown05:12:20

soundsl ike rc isn’t a component

heefoo05:12:43

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

heefoo05:12:51

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

lilactown05:12:54

it depends on how react-chartist is packaged

lilactown05:12:14

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

lilactown05:12:19

(js/console.log rc)

heefoo05:12:27

yes i tried that

heefoo05:12:34

let me check again

lilactown05:12:27

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

lilactown05:12:29

e.g. maps, vectors

lilactown05:12:40

but react-chartist probably expects JS objects and vectors

heefoo05:12:58

i presumed that reagent knows how to convert it

lilactown05:12:11

I think that reagent does a shallow conversion of the props

heefoo05:12:12

i think this is indicative from the examples

heefoo05:12:53

one level deep shouldn't be enought ?

heefoo05:12:57

for vectors ?

heefoo05:12:27

{default: ƒ, esModule: true}

heefoo05:12:36

it seems that i dont import it correctly

heefoo05:12:47

is an object

lilactown05:12:55

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

heefoo05:12:17

never seen :default before

lilactown05:12:30

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

lilactown05:12:34

I don’t think it’s standard

heefoo05:12:58

ok it works

heefoo05:12:10

I should have noticed it before

lilactown05:12:36

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

(def ChartlistGraph (.-default rc))

;; use ChartlistGraph component

heefoo05:12:37

goog.object/get probably works on getting the default

lilactown05:12:47

yep that too

heefoo05:12:22

It would be good if :import worked on theese things

heefoo05:12:37

but as far as i know is only for goog namespaces

heefoo05:12:10

thanks @lilactown you have been most helpfull

lilactown06:12:46

your welcome! 🙂

mokr13:12:38

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

mokr13:12:22

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

mokr13:12:21

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.

mokr13:12:24

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.

mokr14:12:52

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

talgiat19:12:45

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

lilactown20:12:41

I don’t believe so

Whiskas21:12:40

which version of react reagent uses?

Whiskas21:12:28

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

Whiskas21:12:37

Someone here already had some experience like this before?

achikin22:12:56

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