reagent 2020-02-24 | Slack Archive

frozar15:02:07

Hi folk, I'm building a tiny code to use the npm "react-rough" library: https://www.npmjs.com/package/react-rough My goal is to get the basic example works: display a sketchy rectangle. I have basically this function:

(ns acme.frontend.app
  (:require [reagent.core :as reagent]
            ["react-rough" :as reactrough]
            ["react-rough" :refer [Rectangle]]
            ))
[...]
(defn mount-page []
  (reagent/render
   [:reactrough
    [:Rectangle {:x 15 :y 15 :width 90 :height 80 :fill "red"}]]
   (.getElementById js/document "root")))

I use shadow-cljs to build the project. The compilation passed successfully, so import issue, but I don't get the rectangle displayed on the page... See on the following picture:

frozar15:02:46

Do you have any hint for me to get the rectangle displayed?

thheller15:02:41

:reactrough is incorrect and should be [:> reactrough ...]

thheller15:02:11

same for Rectangle. with :reactrough you just get an actual <reactrough ..> html element as you see in your elements inspector

frozar15:02:54

I tried with

[:> reactrough
    [:> Rectangle {:x 15 :y 15 :width 90 :height 80 :fill "red"}]]

But still don't get the rectangle 😞

p-himik15:02:53

Try to wrap the second vector in a call to reagent.core/reactify-component.

frozar15:02:09

With this code

[:reactrough
    (reagent.core/reactify-component
     [:Rectangle {:x 15 :y 15 :width 90 :height 80 :fill "red"}])
    ]

The "Rectangle" tag is not generated anymore....

p-himik15:02:35

Why did you replace :> reactrough with :reactrough?

frozar15:02:41

even with :> reactrough the rectangle tag is not generated.

frozar15:02:53

Also because it's the first time I see this syntax, so I try with and without :> because I don't know what it means...

p-himik15:02:40

It's syntax sugar for reagent.core/adapt-react-class. You can find it in the Reagent documentation.

frozar15:02:50

Ok, thank you 🙂

frozar15:02:59

Do you know where I can find code example of use of react component from a npm library please?

p-himik15:02:14

OK, I was wrong about using reactify-component - since you don't pass a callback there, it's not needed. The only thing that you need to change is the import. Replace ["react-rough" :as reactrough] with ["react-rough" :default reactrough].

p-himik15:02:13

You can find some things here https://github.com/reagent-project/reagent-cookbook and here https://github.com/reagent-project/reagent/tree/master/examples/ Some of the stuff is outdated though.

frozar15:02:01

Duuude, it works !!!

frozar15:02:25

Thank you, very much. What was wrong with the import step ?

p-himik15:02:06

https://shadow-cljs.github.io/docs/UsersGuide.html#_about_default_exports

frozar15:02:46

Thank you for all the information @U2FRKM4TW 😉

hawkey16:02:01

hi, is there any way to prevent component unmount if has unsaved data.

p-himik17:02:07

Yes, if you control the component.

p-himik17:02:21

The solution is as simple as "just don't unmount it". :)

hawkey08:02:28

@U2FRKM4TW how exactly?

p-himik08:02:25

Your UI is essentially a state machine, maybe with some peculiarities. Figure out the states where the component would be unmounted and where you would want to prevent that. And then either avoid those states or place some guards there.

Micah19:02:18

Hello, I am trying to get CKEditor react component to work.

(ns simple.core
  (:require [reagent.core :as reagent]
            [re-frame.core :as rf]
            [clojure.string :as str]
            [simple.routes :as routes]
            ["ckeditor4-react" :as ck :default CKEditor]
            ))
(defn ui []
  [:div
   [:> CKEditor]]
  )

But am getting error:

react-dom.development.js:12405 Uncaught Error: Assert failed: Expected React component in: [:> nil]
 (in simple.core.ui)
(or (string? comp) (fn? comp))
    at Object.reagent$impl$template$vec_to_elem [as vec_to_elem] (template.cljs:312)
    at Object.reagent$impl$template$as_element [as as_element] (template.cljs:329)
    at template.cljs:403
    at core.cljs:5598
    at core.cljs:5598
    at Object.cljs$core$IKVReduce$_kv_reduce$arity$3 (core.cljs:5602)
    at Object.cljs$core$_kv_reduce [as _kv_reduce] (core.cljs:700)
    at Object.cljs$core$reduce_kv [as reduce_kv] (core.cljs:2543)
    at reagent$impl$template$make_element (template.cljs:401)
    at Object.reagent$impl$template$native_element [as native_element] (template.cljs:285)

Check out https://github.com/madhat2r/shadow-re-frame-simple-example to reproduce

p-himik19:02:05

Your :require is incorrect. Most likely, you have to use :as CKEditor. Or maybe :refer CKEditor.

Micah19:02:55

I have tried it all ways :refer CKEditor and :as ck but according to the translation table https://shadow-cljs.github.io/docs/UsersGuide.html#js-deps and the CKeditor docs https://ckeditor.com/docs/ckeditor4/latest/guide/dev_react.html the form should be :default CKEditor

Micah19:02:19

Well if I use :as CKEditor it works with [:> CKEditor] but shouldn't that be [:> CKEditor/CKEditor] that is confusing to me, what am I missing?

p-himik19:02:29

It's probably the issue with :default: https://shadow-cljs.github.io/docs/UsersGuide.html#_about_default_exports

Micah20:02:33

thank you @U2FRKM4TW that is correct. I missed that in the docs.

2020-02-24

Channels