react_phoenix v1.0.0 ReactPhoenix.ClientSide View Source
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.
Link to this section 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
Link to this section Functions
react_component(name)
View Source
react_component(name :: String.t()) :: Phoenix.HTML.safe()
react_component(name :: String.t()) :: Phoenix.HTML.safe()
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.
react_component(name, props)
View Source
react_component(name :: String.t(), props :: list() | map()) ::
Phoenix.HTML.safe()
react_component(name :: String.t(), props :: list() | map()) :: Phoenix.HTML.safe()
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.
react_component(name, props, opts)
View Source
react_component(
name :: String.t(),
props :: map(),
opts :: [{:target_id, String.t()}]
) :: Phoenix.HTML.safe()
react_component( name :: String.t(), props :: map(), opts :: [{:target_id, String.t()}] ) :: Phoenix.HTML.safe()
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", # <- component name
%{language: "elixir", awesome: true}, # <- props
target_id: "react-div" # <- options
) %>
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.