README.md in amber_component-1.1.1 vs README.md in amber_component-1.2.0
- old
+ new
@@ -335,11 +335,14 @@
It's possible to nest components or provide
custom HTML to a component.
This works similarly to React's `props.children`.
-To render the passed nested content call `yield.html_safe` somewhere inside the template/view.
+To render the passed nested content call `children(&block)` somewhere inside the ERB template/view.
+If you're using another template language like Haml,
+you may need to use `children{yield}` instead. This difference
+is due to how these templates are compiled.
```ruby
# app/components/modal_component.rb
class ModalComponent < ApplicationComponent
@@ -356,11 +359,11 @@
<%= title %>
</div>
<div class="modal_body">
<!-- nested content will be rendered here -->
- <%= yield.html_safe %>
+ <%= children(&block) %>
</div>
<div class="modal_footer">
<div class="modal_close_button"></div>
</div>
@@ -387,10 +390,10 @@
Note that this will raise an error when no block/nested content is provided.
In order to render nested content
only when it is present (will work without nested content)
-you can use `yield.html_safe if block_given?`
+you can use `children(&block) if block_given?` in ERB templates (or `children{yield} if block_given?` for Haml and others)
In general `block_given?` will return `true` when a block/nested content is present, otherwise `false`.
You can use it to render content conditionally based on
whether nested content is present.