react_phoenix v0.4.2 ReactPhoenix.ClientSide
Functions to make rendering React components easy in Phoenix views.
Combined with the javascript also included in this package, rendering React components in your Phoenix views can be much easier. The module was built with Brunch in mind (vs Webpack). Since Phoenix uses Brunch by default, this package can make getting React into your application much faster than switching over to a different system.
Summary
Functions
Generate a div containing the named React component with no props or options
Generate a div containing the named React component and pass it props
Generate a div containing the named React component and pass it props and options
Functions
Generate a div containing the named React component with no props or options.
Returns safe html: {:safe, [60, "div", ...]}
.
You can utilize this in your Phoenix views:
<%= ReactPhoenix.ClientSide.react_component("MyComponent") %>
The resulting <div>
tag is formatted specifically for the included javascript
helper to then turn into your named React component.
Generate a div containing the named React component and pass it props.
Returns safe html: {:safe, [60, "div", ...]}
.
Props can be passed in as a Map or a List.
You can utilize this in your Phoenix views:
<%= ReactPhoenix.ClientSide.react_component("MyComponent", %{language: "elixir", awesome: true}) %>
The resulting <div>
tag is formatted specifically for the included javascript
helper to then turn into your named React component and then pass in the props specified.
Generate a div containing the named React component and pass it props and options.
Returns safe html: {:safe, [60, "div", ...]}
.
For now, props MUST be passed in as a Map. The only option currently accepted is target_id
.
If you pass in a target_id
, the resulting <div>
tag will tell the javascirpt helper
which HTML element you’d like to render the React component. This is helpful in scenarios
like server-side rendering of a component.
You can utilize this in your Phoenix views:
<%= ReactPhoenix.ClientSide.react_component(
"MyComponent",
%{language: "elixir", awesome: true},
target_id: "react-div"
) %>
The resulting <div>
tag is formatted specifically for the included javascript
helper to then turn into your named React component and then pass in the props specified.