From 22470f640a58f40c9a3404c62f478fb868f2e8c2 Mon Sep 17 00:00:00 2001
From: Hayleigh Thompson <me@hayleigh.dev>
Date: Sat, 14 May 2022 10:37:35 +0100
Subject: :memo: Update README to include a short example.

---
 README.md | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index ae30c41..d35a854 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,42 @@
 # Lustre
 
-> A playground for building create web apps – powered by Gleam!
+> A framework for building create web apps – powered by Gleam and React!
 
 [![Package Version](https://img.shields.io/hexpm/v/lustre)](https://hex.pm/packages/lustre)
 [![Hex Docs](https://img.shields.io/badge/hex-docs-ffaff3)](https://hexdocs.pm/lustre/)
 
+```gleam
+import gleam/int
+import lustre
+import lustre/element.{ button, div, p, text }
+import lustre/event.{ dispatch, on_click }
+
+pub fn main () {
+    let app = lustre.application(0, update, render)
+    lustre.start(app, "#app")
+}
+
+type Action {
+    Incr
+    Decr
+}
+
+fn update (state, action) {
+    case action {
+        Incr -> state + 1
+        Decr -> state - 1
+    }
+}
+
+fn render (state) {
+    div([], [
+        button([ on_click(dispatch(Decr)) ], [ text("-") ]),
+        p([], [ text(int.to_string(state)) ]),
+        button([ on_click(dispatch(Incr)) ], [ text("+") ])
+    ])
+}
+```
+
 > ❗️ This package relies on Gleam's JavaScript FFI and will not work if your are
 > targeting Erlang.
 
-- 
cgit v1.2.3