module ReactOnRails::Helper
def react_component(component_name, options = {})
random_dom_id can be set to override the default from the config/initializers. That's only
Any other options are passed to the content tag, including the id.
if the JS code throws
raise_on_prerender_error:
true, you'll still see the errors on the server.
so long as you have the default configuration of logging_on_server set to
logs to browser. While this can make troubleshooting server rendering difficult,
replay_console:
default is true for development, off otherwise
trace:
html_options: You can set other html attributes that will go on this component
id: You can optionally set the id, or else a unique one is automatically generated.
prerender:
not pass any props if you are separately initializing the store by the `redux_store` helper.
props: Ruby Hash or JSON string which contains the properties to pass to the react object. Do
options:
spec/dummy/client/app/packs/client-bundle.js for examples of this.
See spec/dummy/client/app/packs/server-bundle.js and
See README.md for how to "register" your React components.
a generator:
Exposing the react_component_name is necessary to both a plain ReactComponent as well as
MyReactComponent.renderFunction = true;
let MyReactComponentApp = (props) =>
`.renderFunction = true`:
Alternately, you can define the Render-Function with an additional property
let MyReactComponentApp = (props, railsContext) =>
props and the railsContext, like this:
"Render-Functions" differ from a React function in that they take two parameters, the
react_component_name: can be a React function or class component or a "Render-Function".
def react_component(component_name, options = {}) internal_result = internal_react_component(component_name, options) server_rendered_html = internal_result[:result]["html"] console_script = internal_result[:result]["consoleReplayScript"] render_options = internal_result[:render_options] case server_rendered_html when String html = build_react_component_result_for_server_rendered_string( server_rendered_html: server_rendered_html, component_specification_tag: internal_result[:tag], console_script: console_script, render_options: render_options ) html.html_safe when Hash msg = <<~MSG Use react_component_hash (not react_component) to return a Hash to your ruby view code. See https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx for an example of the necessary javascript configuration. MSG raise ReactOnRails::Error, msg else class_name = server_rendered_html.class.name msg = <<~MSG ReactOnRails: server_rendered_html is expected to be a String or Hash for #{component_name}. Type is #{class_name} Value: #{server_rendered_html} If you're trying to use a Render-Function to return a Hash to your ruby view code, then use react_component_hash instead of react_component and see https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx for an example of the JavaScript code. MSG raise ReactOnRails::Error, msg end end