chore: add support for state in Playroom

kiwicom · Jan 15, 2025 · a961646 · a961646
1 parent 8a72f12
commit a961646
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/orbit-components/playroom.config.js b/packages/orbit-components/playroom.config.js
@@ -69,7 +69,20 @@ module.exports = {
   },
   exampleCode: `
   <div className="bg-white-normal p-300 h-screen">
-    <Button type="primary">Hello World</Button>
+    <Context>
+      {() => {
+        const [hasError, setHasError] = React.useState(false);
+
+        return (
+          <Button
+            onClick={() => setHasError(!hasError)}
+            type={hasError ? "critical" : "primary"}
+          >
+            {hasError ? "Ups, click again" : "Click Me"}
+          </Button>
+        );
+      }}
+    </Context>
   </div>
 `,
 };
diff --git a/packages/orbit-components/playroomComponents.tsx b/packages/orbit-components/playroomComponents.tsx
@@ -1,2 +1,4 @@
 // Re-export components from Orbit
 export * from "@kiwicom/orbit-components";
+
+export const Context = ({ children }) => children();