Render React.js components in Phoenix LiveView views.
Add to your mix.exs
and run mix deps.get
:
def deps do
[
{:phoenix_live_react, "~> 0.2"}
]
end
Then add to your assets/package.json
and run npm i
or yarn
:
{
...
"dependencies": {
...
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
"phoenix_live_react": "file:../deps/phoenix_live_react", <-- ADD THIS!
...
},
...
}
Note for umbrella projects the relative file paths should look like "file:../../../deps/phoenix_live_react"
Add your react components to the window scope (app.js
):
import { MyComponent } from "./components/my_components"
window.Components = {
MyComponent
}
Connect the hooks to your liveview (app.js
):
import LiveReact, { initLiveReact } from "phoenix_live_react"
let hooks = { LiveReact }
let liveSocket = new LiveSocket("/live", Socket, { hooks })
liveSocket.connect()
// Optionally render the React components on page load as
// well to speed up the initial time to render.
// The pushEvent prop will not be passed here.
document.addEventListener("DOMContentLoaded", e => {
initLiveReact()
})
Use in your live view:
import PhoenixLiveReact, only: [live_react_component: 2]
def render(assigns) do
~L"""
<%= live_react_component("Components.MyComponent", %{name: @name}) %>
"""
end
To push events back to the liveview the pushEvent
function from Phoenix LiveView is passed as a prop
the the component.
- pushEvent(event, payload) - method to push an event from the client to the LiveView server
const { pushEvent } = this.props;
pushEvent("button_click");
pushEvent("myevent", {"var": "value"});
In your assets dir:
npm install react react-dom --save
npm install @babel/preset-env @babel/preset-react --save-dev
Create an assets/.babelrc
file:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
For NPM users, you might need the add the following to your assets/webpack.config.js
file:
module.exports = (env, options) => ({
// add:
resolve: {
alias: {
react: path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom')
}
}
//
});
This library is inspired by react-phoenix.
Check it out if you want to use react components in regular views.