lilactown / helix

A simple, easy to use library for React development in ClojureScript.
Eclipse Public License 2.0
624 stars 52 forks source link
cljs clojurescript hooks interop react

Helix

ClojureScript optimized for modern React development.

(ns my-app.core
  (:require [helix.core :refer [defnc $]]
            [helix.hooks :as hooks]
            [helix.dom :as d]
            ["react-dom/client" :as rdom]))

;; define components using the `defnc` macro
(defnc greeting
  "A component which greets a user."
  [{:keys [name]}]
  ;; use helix.dom to create DOM elements
  (d/div "Hello, " (d/strong name) "!"))

(defnc app []
  (let [[state set-state] (hooks/use-state {:name "Helix User"})]
    (d/div
     (d/h1 "Welcome!")
      ;; create elements out of components
      ($ greeting {:name (:name state)})
      (d/input {:value (:name state)
                :on-change #(set-state assoc :name (.. % -target -value))}))))

;; start your app with your favorite React renderer
(defonce root (rdom/createRoot (js/document.getElementById "app")))
(.render root ($ app))

Installation

Clojars Project

Install the latest version from clojars in your project.

Install JS dependencies:

npm init # initialize NPM project if necessary
npm i react react-refresh # install react, and react-refresh for hot reloading support (see docs)
npm i react-dom # install renderer. alternatives could be react-native, react-three-fiber, etc.

shadow-cljs and react-native

See React Native.

lein-cljsbuild / figwheel-main / raw CLJS

Use CLJSJS or package react yourself using webpack, ensuring it is provided as the name "react".

Documentation

View formatted docs at cljdoc badge

Other resources:

Related projects and repos

Companies using it

amperity_logo

License

Copyright © 2023 Will Acton

Distributed under the EPL 2.0