Module: Proscenium::Phlex::React

Extended by:

ActiveSupport::Concern

Includes:

Sideload, ReactComponentable

Defined in:

lib/proscenium/phlex/react.rb

Overview

Renders a <div> for use with React components, with data attributes specifying the component path and props.

If a block is given, it will be yielded within the div, allowing for a custom “loading” UI. If no block is given, then a “loading…” text will be rendered. It is intended that the component is mounted to this div, and the loading UI will then be replaced with the component’s rendered output.

You can pass props to the component in the ‘:props` keyword argument.

Instance Method Summary

• #view_template(**attributes) { ... } ⇒ Object

  Override this to provide your own loading UI.

Methods included from Sideload

#before_template

Instance Method Details

#view_template(**attributes) { ... } ⇒ Object

Override this to provide your own loading UI.

Examples:

def view_template(**attributes, &block)
  super do
    'Look at me! I am loading now...'
  end
end

Yields:

• the given block to a ‘div` within the top level component div.

# File 'lib/proscenium/phlex/react.rb', line 28

def view_template(**attributes, &)
  send(root_tag, **{ data: data_attributes }.deep_merge(attributes), &)
end