diff options
Diffstat (limited to 'examples/framework-preact/src')
| -rw-r--r-- | examples/framework-preact/src/components/Counter.tsx | 8 | ||||
| -rw-r--r-- | examples/framework-preact/src/pages/index.astro | 12 |
2 files changed, 13 insertions, 7 deletions
diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx index 61a9f9d5a..5d702fb42 100644 --- a/examples/framework-preact/src/components/Counter.tsx +++ b/examples/framework-preact/src/components/Counter.tsx @@ -1,11 +1,9 @@ import { h, Fragment } from 'preact'; -import { useState } from 'preact/hooks'; import './Counter.css'; -export default function Counter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); +export default function Counter({ children, count }) { + const add = () => count.value++; + const subtract = () => count.value--; return ( <> diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro index a6565f6c1..b37295d7b 100644 --- a/examples/framework-preact/src/pages/index.astro +++ b/examples/framework-preact/src/pages/index.astro @@ -2,8 +2,12 @@ // Component Imports import Counter from '../components/Counter'; +import { signal } from '@preact/signals'; + // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ + +const count = signal(0); --- <html lang="en"> @@ -25,8 +29,12 @@ import Counter from '../components/Counter'; </head> <body> <main> - <Counter client:visible> - <h1>Hello, Preact!</h1> + <Counter count={count} client:visible> + <h1>Hello, Preact 1!</h1> + </Counter> + + <Counter count={count} client:visible> + <h1>Hello, Preact 2!</h1> </Counter> </main> </body> |