diff --git a/README.md b/README.md index 8ba38f2e0..ad8f07b2b 100644 --- a/README.md +++ b/README.md @@ -212,13 +212,14 @@ Components can also be prerendered directly from a controller action with the cu class TodoController < ApplicationController def index @todos = Todo.all - render component: 'TodoList', props: { todos: @todos }, tag: 'span' + render component: 'TodoList', props: { todos: @todos }, tag: 'span', class: 'todo' end end ``` This custom renderer behaves the same as a normal view renderer and accepts the usual arguments - `content_type`, `layout`, `location` and `status`. -By default, your current layout will be used and the component, rather than a view, will be rendered in place of `yield`. +By default, your current layout will be used and the component, rather than a view, will be rendered in place of `yield`. Custom data-* attributes +can be passed like `data: {remote: true}`. ### Component generator diff --git a/lib/react/rails/controller_renderer.rb b/lib/react/rails/controller_renderer.rb index aaaa2cbc6..e978f21b2 100644 --- a/lib/react/rails/controller_renderer.rb +++ b/lib/react/rails/controller_renderer.rb @@ -12,7 +12,7 @@ def initialize(options={}) def call(name, options, &block) props = options.fetch(:props, {}) - options = options.slice(:data, :tag).merge(prerender: true) + options = options.slice(:data, :aria, :tag, :class, :id).merge(prerender: true) react_component(name, props, options, &block) end end diff --git a/test/dummy/app/controllers/server_controller.rb b/test/dummy/app/controllers/server_controller.rb index 21009432b..4d48181c5 100644 --- a/test/dummy/app/controllers/server_controller.rb +++ b/test/dummy/app/controllers/server_controller.rb @@ -16,6 +16,11 @@ def console_example_suppressed end def inline_component - render component: 'TodoList', props: { todos: ['Render this inline'] }, tag: 'span' + render component: 'TodoList', + props: { todos: ['Render this inline'] }, + tag: 'span', + class: 'custom-class', + id: 'custom-id', + data: { remote: true } end end diff --git a/test/server_rendered_html_test.rb b/test/server_rendered_html_test.rb index 0b32e45de..b5d9500a1 100644 --- a/test/server_rendered_html_test.rb +++ b/test/server_rendered_html_test.rb @@ -55,11 +55,15 @@ def wait_to_ensure_asset_pipeline_detects_changes test 'react inline component rendering' do get '/server/inline_component' rendered_html = response.body - assert_match(/<\/span>/, rendered_html, "it accepts a tag override") # make sure that the layout is rendered with the component assert_match(/Dummy<\/title>/, rendered_html) + # make sure that custom html attributes are rendered + assert_match(/class=\"custom-class\"/, rendered_html) + assert_match(/id=\"custom-id\"/, rendered_html) + assert_match(/data-remote=\"true\"/, rendered_html) end end