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})]])