Class: Proscenium::Phlex::ReactComponent

Inherits:
Proscenium::Phlex show all
Includes:
ReactComponentable
Defined in:
lib/proscenium/phlex/react_component.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 collapse

Methods included from ReactComponentable

#initialize, #props, #virtual_path

Methods inherited from Proscenium::Phlex

inherited, sideload_assets

Methods included from AssetInclusions

#include_assets, #include_javascripts, #include_stylesheets

Methods included from CssModules

#after_template, #before_template, included, #process_attributes

Methods included from CssModule

#class_names, #css_module

Methods included from SourcePath

included

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.



28
29
30
 
# File 'lib/proscenium/phlex/react_component.rb', line 28

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