From e9c5a2d7a32d38b60c460e28a30a743a5ec63801 Mon Sep 17 00:00:00 2001
From: amos-kibet <kibetamos97@gmail.com>
Date: Fri, 19 Apr 2024 02:43:48 +0300
Subject: [PATCH] Give a more elaborate example of using
 `render_dynamic_template_component`

---
 README.md | 43 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 1c19618..9906122 100644
--- a/README.md
+++ b/README.md
@@ -145,6 +145,8 @@ In order to render the email you would then call: `FunctionTemplate.render(first
 
 ### Using Components
 
+**Static components**
+
 In addition to compiling single MJML EEx templates, you can also create MJML partials and include them
 in other MJML templates AND components using the special `render_static_component` function. With the following
 modules:
@@ -201,15 +203,50 @@ cannot use any assigns that would bee to be evaluated at runtime. For example, t
 </mj-text>
 ```
 
+**Dynamic components**
+
 If you need to render your components dynamically, use `render_dynamic_component` instead and be sure to configure your
-template module like so to generate the email HTML at runtime:
+template module like below to generate the email HTML at runtime. First, you create your component, for example, `MyTemplate.CtaComponent.ex`:
 
 ```elixir
-def MyTemplate do
-  use MjmlEEx, mode: :runtime
+def MyTemplate.CtaComponent do
+  use MjmlEEx.Component, mode: :runtime
+
+  @impl MjmlEEx.Component
+  def render(assigns) do
+    """
+    <mj-column>
+      <mj-text font-size="20px" color="#F45E43">#{assigns[:call_to_action_text]}</mj-text>
+      <mj-button align="center" inner-padding="12px 20px">#{assigns[:call_to_action_link]}</mj-button>
+    </mj-column>
+    """
+  end
 end
 ```
 
+then, in your MJML template, insert it using the `render_dynamic_template_component` function:
+
+```html
+<mjml>
+  <mj-body>
+    <mj-section>
+      <mj-column>
+        <mj-divider border-color="#F45E43"></mj-divider>
+        <%= render_dynamic_component MyTemplate.CtaComponent
+        %{call_to_action_text: "Call to action text", call_to_action_link:
+        "#{@cta_link}"} %>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
+```
+
+In your `UserNotifier` module, or equivalent, you render your template, passing any assigns/data it expects:
+
+```Elixir
+WelcomeEmail.render(call_to_action_text: call_to_action_text, call_to_action_link: call_to_action_link)
+```
+
 ### Using Layouts
 
 Often times, you'll want to create an Email skeleton or layout using MJML, and then inject your template into that