aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHayleigh Thompson <me@hayleigh.dev>2022-05-14 10:37:35 +0100
committerHayleigh Thompson <me@hayleigh.dev>2022-05-14 10:37:35 +0100
commit22470f640a58f40c9a3404c62f478fb868f2e8c2 (patch)
tree06728d0222db498089d57c4a89b4b4aa0aa022af
parent1016a9005cd2d034e07380f3877d29fa9c26a8fe (diff)
downloadlustre-22470f640a58f40c9a3404c62f478fb868f2e8c2.tar.gz
lustre-22470f640a58f40c9a3404c62f478fb868f2e8c2.zip
:memo: Update README to include a short example.
-rw-r--r--README.md34
1 files changed, 33 insertions, 1 deletions
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.