Lokeh/hx


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

License: MIT

Language: Clojure

Keywords: clj, cljs, clojurescript, hiccup, hiccup-interpreter, react, react-components, react-hooks


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 :as hooks]
            ["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 update-name] (hooks/useState initial-name)]
    [:<>
     [:div "Hello " 
      [:span {:style {:font-weight "bold"}} name] "!"]
     [:div [:input {:on-change #(update-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, and whatever renderer you are targeting (e.g. react-dom).

npm i react 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.

Project Statistics

Sourcerank 6
Repository Size 341 KB
Stars 128
Forks 7
Watchers 11
Open issues 5
Dependencies 402
Contributors 5
Tags 11
Created
Last updated
Last pushed

Top Contributors See all

Will Daw-Ran Liou Matthew Lyon Orestis Markou Daniel Neal

Packages Referencing this Repo

lilactown/hx
An easy to use, decomplected hiccup compiler for ClojureScript & React.
Latest release 0.5.1 - Updated - 128 stars

Recent Tags See all

0.4.0 March 26, 2019
0.3.2 February 26, 2019
0.3.1 February 22, 2019
0.3.0 February 10, 2019
0.2.5 December 22, 2018
0.2.4 December 10, 2018
0.2.3 November 05, 2018
0.2.2 November 02, 2018
0.2.1 October 31, 2018
0.2.0 October 31, 2018
0.1.0 October 26, 2018

Something wrong with this page? Make a suggestion

Last synced: 2019-05-06 01:02:39 UTC

Login to resync this repository