Hiccup

UIx is using Hiccup for describing UI structure. There are 3 main types of Hiccup forms: DOM elements, UIx component instances and interop elements.

DOM elements

Represented as a vector of tag, optional attributes and zero or more child elements.

[:button {:title "Submit"}
  "press me"]

Tag name is declared as a keyword with optional id and class attributes defined as a part of the name. Together they resemble CSS selector syntax.

[:div] ;; <div></div>
[:h1.heading {:class "h1"} "👋"] ;; <h1 class="heading h1">👋</h1>
[:button#id.class1.class2] ;; <button id="id" class="class1 class2"></button>

When an element is div with either class or id or both of them, div tag can be skipped.

[:#id] ;; <div id="id"></div>
[:.class] ;; <div class="class"></div>

UIx component instances

Component instance is a vector where the first item is the component itself and all of the rest are arguments.

(defn button [{:keys [on-click]} child]
  [:button.btn {:on-click on-click}
    child])
    
[button {:on-click #(js/console.log :click)}
  "press me"]

Interop elements

Interop syntax provides convenient way of using React components written in JavaScript in UIx components. More on that in “Interop with React” section.

[:> Button {:on-click #(js/console.log :click)}
  "press me"]