From f44248b7edaf675f3bb08224befc07bca0d89e9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sun, 17 Jul 2022 12:04:24 +0100
Subject: [PATCH] feat: initial reactive example
---
examples/web/react/app.tsx | 8 ++++---
.../web/react/components/button/button.tsx | 22 ++++++++++++-------
2 files changed, 19 insertions(+), 11 deletions(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index ee855b56..cfda6f16 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import { Button } from "./components";
@@ -6,8 +6,10 @@ import { Button } from "./components";
import "./app.css";
export const App = () => {
- const getText = () => "Hello World";
- return <Button text={getText()} />;
+ const [count, setCount] = useState(0);
+ const getText = () => `Hello World ${count}`;
+ const onClick = () => setCount(count + 1);
+ return <Button text={getText()} onClick={onClick} />;
};
export const startApp = (element: string) => {
diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx
index 39350d86..ed040939 100644
--- a/examples/web/react/components/button/button.tsx
+++ b/examples/web/react/components/button/button.tsx
@@ -2,20 +2,26 @@ import React, { FC } from "react";
import "./button.css";
-export const Button: FC<{ text: string; size?: string; style?: string[] }> = ({
+type ButtonProps = {
+ text: string;
+ size?: string;
+ style?: string[];
+ onClick?: () => void;
+};
+
+export const Button: FC<ButtonProps> = ({
text,
size = "small",
- style = ["simple", "border"]
+ style = ["simple", "border"],
+ onClick = undefined
}) => {
- const onClick = () => {
- alert("Hello World");
- };
-
const classes = () => ["button", size, ...style].join(" ");
-
+ const _onClick = () => (onClick ? onClick() : undefined);
return (
- <span className={classes()} onClick={onClick}>
+ <span className={classes()} onClick={_onClick}>
{text}
</span>
);
};
+
+export default Button;
--
GitLab