update mui example

Author: rmorshea

docs/source/architectural-patterns.rst

@@ -200,8 +200,9 @@ If you're thinking critically about IDOM's use of a virtual DOM, you may have th
 
 And yes, while the performance of IDOM is sufficient for most use cases, there are
 inevitably scenarios where this could be an issue. Thankfully though, just like its
-peers, IDOM makes it possible to seemlesly integrate :ref:`Custom Javascript Components`.
-They can be custom built for your use case, or you can just leverage the existing
-Javascript ecosystem without any extra work:
+peers, IDOM makes it possible to seemlesly integrate :ref:`Javascript Components`. They
+can be :ref:`custom built <Custom Javascript Components>` for your use case, or you can
+just leverage the existing Javascript ecosystem
+:ref:`without any extra work <Dynamically Loaded Components>`:
 
-.. example:: material_ui_slider
+.. example:: material_ui_switch

docs/source/examples.rst

@@ -72,7 +72,7 @@ Material UI Slider
 
 Move the slider and see the event information update 👇
 
-.. example:: material_ui_slider
+.. example:: material_ui_switch
 
 
 .. Links

docs/source/examples/material_ui_slider.py

@@ -0,0 +1,23 @@
+import idom
+
+
+mui = idom.web.module_from_template("react", "@material-ui/core@^5.0", fallback="⌛")
+Switch = idom.web.export(mui, "Switch")
+
+
+@idom.component
+def DayNightSwitch():
+    checked, set_checked = idom.hooks.use_state(False)
+
+    return idom.html.div(
+        Switch(
+            {
+                "checked": checked,
+                "onChange": lambda event, checked: set_checked(checked),
+            }
+        ),
+        "🌞" if checked else "🌚",
+    )
+
+
+idom.run(DayNightSwitch)

docs/source/examples/material_ui_switch.py

@@ -1,3 +1,5 @@
+.. _Javascript Component:
+
 Javascript Components
 =====================