Interop - active-group/reacl GitHub Wiki

A Reacl component is a React component. Since Reacl components are entirely self-contained and therefore do not rely on global state, interoperability with other React frameworks such as Reagent (and therefore re-frame) or React itself is straightforward when you want to use Reacl towards the leaves of your component tree. You can use reacl2.core/react-class to obtain the React class of a given Reacl class. The following is a minimal example of a Reagent component that uses a Reacl component.

(reacl/defclass reacl-component
  this
  app-state
  []

  render
  (dom/div
    "A reacl component"))

(defn reagent-component []
  [:div
    [:h1 "A reagent component"]
    [(reagent/adapt-react-class
        (reacl/react-class reacl-component))]])

The initial app state and arguments are passed inside a map.

{:reacl_initial_app_state "Your initial app state"
 :reacl_args ["Your" "initial" "arguments"]}

Unfortunately, Reagent lossily transforms all arguments you pass to components that were treated with reagent.core/adapt-react-class (essentially calling a fancy version of cljs->js on them). Until this behaviour is fixed in Reagent, you can wrap your values in an atom, since atoms are left intact by Reagent.

;; Will display: A reacl component with app state {:left :intact}
(reacl/defclass reacl-component
  this
  app-state
  []

  render
  (dom/div
    "A reacl component with app state "
    (pr-str @app-state)))

(defn reagent-component []
  [:div
    [:h1 "A reagent component"]
    [(reagent/adapt-react-class
        (reacl/react-class reacl-component))
     {:reacl_initial_app_state
      (atom {:left :intact})]])