Skip to content
Reacher: run React hooks on ClojureScript
Clojure CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cli/build
entry
macros/reacher
src/reacher
.gitattributes
.gitignore
README.md
calcit.edn
deps.edn
meyvn.edn
package.json
shadow-cljs.edn
upload.edn
yarn.lock

README.md

Reacher: run React hooks on ClojureScript.

Demo http://repo.respo-mvc.org/reacher/

Usage

Clojars Project

[respo/reacher "0.3.0-a1"]

APIs for creating elements and components:

reacher.core/div
reacher.core/span ; and more
reacher.core/tag*

reacher.core/defcomp
[applied-science.js-interop :as j]
[reacher.core :refer [div defcomp tag* span]]

(tag* :header {}
  (span {}))

(defcomp comp-space [props]
  (let [w (j/get props :w), h (j/get props :h)]
    (if (some? w)
      (div {:style {:display :inline-block, :width w}})
      (div {:style {:height h}}))))

(comp-space (j/obj :w 100))

Wrapped APIs:

reacher.core/use-memo
reacher.core/use-callback
[reacher.core :refer [div defcomp use-memo use-callback]]

(defcomp com-a []
  (let [child (use-memo [x y] (fn [] (div)))
        handler (use-callback [x y] (fn [] (println "event")))])
    (div {:on-click handler}
      child))

Interact with states:

reacher.core/use-states
reacher.core/use-atom
[reacher.core :refer [div defcomp use-atom use-states]]

(defcomp comp-a []
  (let [*s (use-atom 1)])
    (div {:on-click (fn []
                      (swap! *s inc))}))

(defcomp comp-b []
  (let [[s update-s!] (use-states {:count 1}]
    (div {on-click (fn []
                      (update-s! (fn [s1] (update s1 :count inc))))})))

Dispatch function:

reacher.core/dispatch-context
reacher.core/use-dispatch
[reacher.core :refer [div defcomp use-dispatch dispatch-context]]

(defn dispatch! [op op-data])

; inject Provider
(ReactDOM/render
 (React/createElement
  (j/get dispatch-context :Provider)
  (j/obj :value dispatch!)
  (comp-container (j/obj :store @*store)))
 mount-target)

(defcomp comp-a []
  (let [dispatch! (use-dispatch)]
    (div {})))

Clojure maps are transformed into JavaScript objects dynamically.

Workflow

Based on calcit-workflow.

License

MIT

You can’t perform that action at this time.