From 1efa65ff0426ede034d788cbf831cdfde33fcb0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Wed, 27 Mar 2019 15:40:24 +0100
Subject: [PATCH] doc: add another example in readme.md

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

diff --git a/README.md b/README.md
index ab51757f..81c10d18 100644
--- a/README.md
+++ b/README.md
@@ -79,6 +79,46 @@ const hello = new HelloWorld(env, { name: "World" });
 hello.mount(document.body);
 ```
 
+The next example show how interactive widgets can be created and how widget
+composition works:
+
+```javascript
+class Counter extends owl.core.Component {
+  inlineTemplate = `
+    <div>
+      <button t-on-click="increment(-1)">-</button>
+      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
+      <button t-on-click="increment(1)">+</button>
+    </div>`;
+
+  constructor(parent, props) {
+    super(parent, props);
+    this.state = {
+      counter: props.initialState || 0
+    };
+  }
+
+  increment(delta) {
+    this.updateState({ counter: this.state.counter + delta });
+  }
+}
+
+class App extends owl.core.Component {
+  inlineTemplate = `
+    <div>
+        <t t-widget="Counter" t-props="{initialState: 1}">
+        <t t-widget="Counter" t-props="{initialState: 42}">
+    </div>`;
+}
+
+const env = {
+  qweb: new owl.core.QWeb()
+};
+
+const app = new App(env);
+app.mount(document.body);
+```
+
 More interesting examples on how to work with this web framework can be found in the _examples/_ folder:
 
 - [Todo Application](examples/readme.md#todo-app)