react_phoenix v0.4.1 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

react_component(name)

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)

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)

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.