Updating readme

README.md

@@ -140,6 +140,52 @@ In order to render the email you would then call: `FunctionTemplate.render(first
 
 ### Using 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_component` function. With the following
+modules:
+
+```elixir
+defmodule FunctionTemplate do
+  use MjmlEEx, mjml_template: "component_template.mjml.eex"
+end
+```
+
+```elixir
+defmodule HeadBlock do
+  use MjmlEEx.Component
+
+  @impl true
+  def render(_opts) do
+    """
+    <mj-head>
+      <mj-title>Hello world!</mj-title>
+      <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500"></mj-font>
+    </mj-head>
+    """
+  end
+end
+```
+
+And the following template:
+
+```html
+<mjml>
+  <%= render_component HeadBlock %>
+
+  <mj-body>
+    <mj-section>
+      <mj-column>
+        <mj-divider border-color="#F45E43"></mj-divider>
+        <mj-text font-size="20px" color="#F45E43">Hello <%= generate_full_name(@first_name, @last_name) %>!</mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
+```
+
+Be sure to look at the `MjmlEEx.Component` for additional usage information as you can also pass options
+to your template and use them when generating the partial string.
+
 ## Attribution
 
 - The logo for the project is an edited version of an SVG image from the [unDraw project](https://undraw.co/)

lib/mjml_eex.ex

@@ -10,6 +10,28 @@ defmodule MjmlEEx do
     use MjmlEEx, mjml_template: "basic_template.mjml.eex"
   end
   ```
+
+  Along with the `basic_template.mjml.eex MJML` template located in the same
+  directory as the module containing the following:
+
+  ```html
+  <mjml>
+    <mj-body>
+      <mj-section>
+        <mj-column>
+          <mj-divider border-color="#F45E43"></mj-divider>
+          <mj-text font-size="20px" color="#F45E43">Hello <%= @first_name %> <%= @last_name %>!</mj-text>
+        </mj-column>
+      </mj-section>
+    </mj-body>
+  </mjml>
+  ```
+
+  Once that is in place, you can render the final HTML document by running:
+
+  ```elixir
+  BasicTemplate.render(first_name: "Alex", last_name: "Koutmos")
+  ```
   """
 
   alias MjmlEEx.Utils

lib/mjml_eex/component.ex

@@ -2,12 +2,51 @@ defmodule MjmlEEx.Component do
   @moduledoc """
   This module allows you to define a reusable MJML component that
   can be injected into an MJML template prior to it being
-  rendered into HTML.
+  rendered into HTML. To do so, create an `MjmlEEx.Component`
+  module that looks like so:
+
+  ```elixir
+  defmodule HeadBlock do
+    use MjmlEEx.Component
+
+    @impl true
+    def render(_opts) do
+      \"""
+      <mj-head>
+        <mj-title>Hello world!</mj-title>
+        <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500"></mj-font>
+      </mj-head>
+      \"""
+    end
+  end
+  ```
+
+  With that in place, anywhere that you would like to use the component, you can add:
+  `<%= render_component HeadBlock %>` in your MJML EEx template.
+
+  You can also pass options to the render function like so:
+
+  ```elixir
+  defmodule HeadBlock do
+    use MjmlEEx.Component
+
+    @impl true
+    def render(opts) do
+      \"""
+      <mj-head>
+        <mj-title><%= opts[:title] %></mj-title>
+        <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500"></mj-font>
+      </mj-head>
+      \"""
+    end
+  end
+  ```
+
+  And calling it like so: `<%= render_component(HeadBlock, title: "Some really cool title") %>`
   """
 
   @doc """
-  Returns the MJML markup for a particular component. This callback does
-  not take in any parameters
+  Returns the MJML markup for the component as a string.
   """
   @callback render(opts :: keyword()) :: String.t()