From 5b18cf802bdc6b86a9cf06ccb893e1e7ee0695a0 Mon Sep 17 00:00:00 2001
From: heapwolf <paolo@async.ly>
Date: Sun, 26 May 2024 15:38:34 +0200
Subject: [PATCH] Update README.md

---
 README.md | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 359880f8..e9d20bd2 100644
--- a/README.md
+++ b/README.md
@@ -21,13 +21,31 @@ npm install @socketsupply/tonic
 
 ```js
 import Tonic from '@socketsupply/tonic'
+```
+
+You can use functions as components. They can be async or even an async generator function.
+
+```js
+async function MyGreeting () {
+  const data = await (await fetch('https://example.com/data')).text()
+  return this.html`<h1>Hello, ${data}</h1>`
+}
+```
+
+Or you can use classes. Every class must have a render method.
 
+``js
 class MyGreeting extends Tonic {
-  render () {
-    return this.html`<div>Hello, World.</div>`
+  async * render () {
+    yield this.html`<div>Loading...</div>`
+
+    const data = await (await fetch('https://example.com/data')).text()
+    return this.html`<div>Hello, ${data}.</div>`
   }
 }
+```
 
+```js
 Tonic.add(MyGreeting, 'my-greeting')
 ```