Skip to content
A simple, easy to use library for React development in ClojureScript.
Branch: master
Clone or download
Latest commit dad9060 Mar 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci npx Mar 14, 2019
docs
examples correct devcard name Mar 16, 2019
public/workshop
scripts
src/hx touch up Mar 17, 2019
test
.gitignore
CHANGELOG.md Update changelog Mar 17, 2019
LICENSE Update LICENSE Feb 2, 2019
README.md Update README.md Mar 10, 2019
karma.conf.js ci Mar 14, 2019
package-lock.json bump shadow-cljs Mar 16, 2019
package.json bump shadow-cljs Mar 16, 2019
project.clj bump version 0.3.3 Mar 8, 2019
shadow-cljs.edn ci Mar 14, 2019

README.md

hx

Clojars Project

A simple, easy to use library for React development in ClojureScript.

(ns my-app.core
  (:require [hx.react :as hx :refer [defnc]]
            [hx.hooks :refer [<-state]]
            ["react-dom" :as react-dom]))

;; `defnc` creates a function that takes a props object and returns React
;; elements. You may use it just like any normal React component.
(defnc MyComponent [{:keys [initial-name]}]
  ;; use React Hooks for state management
  (let [name (<-state initial-name)]
    [:<>
     [:div "Hello " 
      [:span {:style {:font-weight "bold"}} @name] "!"]
     [:div [:input {:on-change #(reset! name (-> % .-target .-value))}]]]))

(react-dom/render
  ;; hx/f transforms Hiccup into a React element.
  ;; We only have to use it when we want to use hiccup outside of `defnc` / `defcomponent`
  (hx/f [MyComponent {:initial-name "React in CLJS"}])
  (. js/document getElementById "app"))

Dependencies

You'll want to make sure you have the latest version of react, react-is, and whatever renderer you are targeting (e.g. react-dom).

npm i react react-is react-dom

If you want to use the React Hooks API (hx.hooks), you'll need to ensure you are using React 16.8 or later.

What problems does hx solve?

hx is meant to make it simple, easy and fun to use React.js within ClojureScript. It is your bridge to the wide world of React.js in idiomatic CLJS.

The library is split into (currently) three sections, which you can feel free to mix as your project sees fit:

  1. A hiccup interpreter. Takes in [:div {:style {:color "red"}} [:span "foo"]] and spits out React.createElement calls.

  2. Helpers for creating components. defnc and defcomponent help us write plain React.js components in idiomatic ClojureScript.

  3. Helpers for using React Hooks.

What problems does hx not solve?

No opinionated state management, no custom rendering queue. Use it to build your awesome opinionated async reactive immutable app framework. hx is just a Clojure-y interface to creating plain, unadulterated React components.

Documentation

Examples

Interop:

Projects that use it

License

Copyright © 2018 Will Acton

Distributed under the MIT license.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.