View Source LiveAssign.React (live_assign v0.3.1)
Define reactive functions.
A reactive function is tagged with the @react
attribute and has an arity of 1, accepting the
%LiveView.Socket{}
as its argument, and returning the modified socket.
@react to: [:some_prop, :some_state]
defp put_changes(socket) do
# ...
end
Reactive functions can subscribe to changes in state assigns or, in Live Compoents, prop assigns.
options-for-react
Options for @react
:to
- required; an atom, or list of atoms, specifying the state and prop fields to subscribe to:repeats?
- optional, defaults tofalse
; whentrue
, disables infinite loop detection
infinite-loop-detection
Infinite Loop Detection
If a reactive function is executed multiple times during a single update cycle, this
indicates a possible infinite loop of reactive callbacks, and a RuntimeError
will be raised.
This check can be bypassed with the repeats?: true
option on the @react
attribute.
example
Example
defmodule MyComponent do
use Phoenix.LiveComponent
use LiveAssign.LiveComponent
prop :first_name
prop :last_name
state :big_display_name
state :display_name
state :full_name?, default: false
# Triggered when there are any changes to these props or state
@react to: [:first_name, :last_name, :full_name?]
defp put_display_name(socket) do
if socket.assigns.full_name? do
put_state(socket, display_name: "#{socket.assigns.first_name, socket.assigns.last_name}")
else
put_state(socket, display_name: socket.assigns.first_name)
end
end
# Triggered after put_display_name/1 finishes
@react to: :display_name
defp put_big_display_name(socket) do
put_state(socket, big_display_name: String.upcase(socket.assigns.display_name))
end
end