From 7007386376ff1888b020503ccd45b5a0a93c70c3 Mon Sep 17 00:00:00 2001
From: Jason Miller <jasonmiller@synacor.com>
Date: Thu, 3 Nov 2016 20:49:49 -0400
Subject: [PATCH] Add sortof components example to the readme

---
 README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/README.md b/README.md
index 7f47597..1c41422 100644
--- a/README.md
+++ b/README.md
@@ -48,3 +48,56 @@ document.body.innerHTML = (
   </div>
 );
 ```
+
+
+### New: "Sortof" Components!
+
+`vhtml` intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML.
+However, it's still possible to make use of basic Pure Functional Components as a sort of "template partial".
+
+When `vhtml` is given a Function as the JSX tag name, it will invoke that function and pass it `{ children, ...props }`.
+This is the same signature as a Pure Functional Component in react/preact, except `children` is an Array of already-serialized HTML strings.
+
+This actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components.
+
+Here's a more complex version of the previous example that uses a component to encapsulate iteration items:
+
+```js
+let items = ['one', 'two'];
+
+const Item = ({ item, index, children }) => (
+  <li id={index}>
+    <h4>{item}</h4>
+    {children}
+  </li>
+);
+
+console.log(
+  <div class="foo">
+    <h1>Hi!</h1>
+    <ul>
+      { items.map( (item, index) => (
+        <Item {...{ item, index }}>
+          This is item {item}!
+        </Item>
+      )) }
+    </ul>
+  </div>
+);
+```
+
+The above outputs the following HTML:
+
+```html
+<div class="foo">
+  <h1>Hi!</h1>
+  <ul>
+    <li id="0">
+      <h4>one</h4>This is item one!
+    </li>
+    <li id="1">
+      <h4>two</h4>This is item two!
+    </li>
+  </ul>
+</div>
+```