Interop with React

Using React components in UIx

In “Hiccup” section we've learned about special interop syntax for consuming React components written in JavaScript.

As an example let’s say we have Button component that we want to use in UIx component.

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

Here’s how to use it in UIx:

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

Interop element starts with a special marker :>, followed by JS component, that instructs UIx to handle provided component in a special way:

1. The first argument to JS component is optional map of attributes

   • Map of attributes is shallowly transformed into JavaScript’s object, meaning that it is your responsibility to pass nested objects as proper JS objects or arrays

   • :style attribute is the only exception, the value can be Clojure’s hash map which will be turned into an object as well

   • Keys in kebab case are transformed into camel case

2. Everything else is its children

Using UIx components in React

Now the other way around, we want to use UIx component in React component.

To achieve this we have to write interop layer using uix.core/as-react helper that takes a function which will take React props as a bean and call UIx component.

Note that as-react doesn’t transform camel case keys into kebab case.

(defn button [{:keys [on-click]} children]
  [:button {:on-click on-click}
    children])
    
(def Button
  (uix.core/as-react
    #(button {:on-click (:onClick %)} (:children %))))

Now Button can used as a normal React component.

<Button onClick={console.log}>press me</Button>