diff --git a/examples/Examples.re b/examples/Examples.re
index 71c83dff7..dc85e8242 100644
--- a/examples/Examples.re
+++ b/examples/Examples.re
@@ -155,6 +155,11 @@ let state: state = {
render: _ => NestedClickable.render(),
source: "NestedClickable.re",
},
+ {
+ name: "Keyed List",
+ render: _ => KeyedListExample.render(),
+ source: "KeyedListExample.re",
+ },
],
selectedExample: "Animation",
};
diff --git a/examples/KeyedListExample.re b/examples/KeyedListExample.re
new file mode 100644
index 000000000..98ebcd188
--- /dev/null
+++ b/examples/KeyedListExample.re
@@ -0,0 +1,69 @@
+open Revery;
+open Revery.UI;
+open Revery.UI.Components;
+
+module Styles = {
+ open Style;
+
+ let container = [];
+
+ let toggle = [
+ flexDirection(`Row),
+ justifyContent(`Center),
+ alignItems(`Center),
+ ];
+
+ let item = (~borderOpacity) => [
+ border(~width=2, ~color=Color.rgba(0., 1., 1., borderOpacity)),
+ ];
+
+ let list = [];
+
+ let text = [
+ marginBottom(10),
+ fontFamily("Roboto-Regular.ttf"),
+ fontSize(16),
+ ];
+};
+
+let toggle = (~checked, ~onChange, ()) =>
+
+
+
+ ;
+
+let%component item = (~label, ()) => {
+ let%hook (borderOpacity, _, _) =
+ Hooks.animation(Animation.(animate(Time.ms(500)) |> tween(1., 0.)));
+
+
+
+ ;
+};
+
+let list = (~children, ()) => children ;
+
+let items = [
+ (React.Key.create(), "Item 1"),
+ (React.Key.create(), "Item 2"),
+ (React.Key.create(), "Item 3"),
+ (React.Key.create(), "Item 4"),
+];
+
+let%component container = () => {
+ let%hook (checked, setChecked) = Hooks.state(false);
+
+ let items =
+ checked ? items : List.filter(((_, label)) => label != "Item 3", items);
+
+
+ setChecked(checked => !checked)} />
+
+ {items
+ |> List.map(((_, label)) => )
+ |> React.listToElement}
+
+ ;
+};
+
+let render = () => ;