suggestion: add reagent example

[jwdevantier]

I was struggling a little to get this working with reagent, partly due to my own inexperience with React interop.

However, a minimal example would be

(ns app.example
  (:require [reagent.dom :as rdom]
            [reagent.core :as r]
            [goog.dom :as gdom]
            [emotion.core :refer [defstyled]]))

(defstyled -Button :button
  {:padding "0 .9em .3em .9em"
   :&:hover {:background-color "red"}
   "&:nth-child(0)" {:padding-top ".3em"}})

(def Button (r/adapt-react-class -Button))

(defn my-app []
  [Button "hello, world!"])

;; --- shadow-cljs lifecycle functions
;; [:builds :mybuild :devtools :after-load]
(defn -start []
  (rdom/render [my-app] (gdom/getElement "app")))

;; [:builds :modules :main :init-fn]
(defn ^:export init []
  (-start))

;; [:builds :mybuild :devtools :before-load]
(defn -stop []
  ; nothing to do for now...
  )

In essence, emotion-cljs creates a raw React component, apparently useful for libraries such as helix. To work with reagent, you'll need to wrap this using reagent.core/adapt-react-class.

Specifically, for reagent people, the page on interop might be of interest ( https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md ).

[khmelevskii]

@jwdevantier Thank you for suggestion and example. Let me check how emotion-cljs should work with reagent and I will add example.
Btw, PR is welcomed :)

[khmelevskii]

@jwdevantier added reagent-emotion example. Also was added :wrap option to defstyled for possibility to wrap component in reagent.core/adapt-react-class.
https://github.com/khmelevskii/emotion-cljs#wrapping-styled-components