Skip to content

React & Astro

store.ts
import { createStore } from 'stan-js'
export const { useStore, getState, actions, effect } = createStore({
counter: 0,
})
AstroCounter.astro
---
import { getState } from '../store'
---
<section class="astro">
<img
src="/astro.svg"
alt="Astro"
/>
<h1>
Astro Counter
</h1>
<p id="counter">
{getState().counter}
</p>
<div>
<button id='decrement'>
-
</button>
<button id='increment'>
+
</button>
</div>
</section>
<script>
import { actions, effect } from '../store'
const p = document.querySelector('#counter')
document.querySelector('#decrement')?.addEventListener('click', () => actions.setCounter(prev => prev - 1))
document.querySelector('#increment')?.addEventListener('click', () => actions.setCounter(prev => prev + 1))
effect(({ counter }) => {
if (p) {
p.textContent = counter.toString()
}
})
</script>
ReactCounter.tsx
import { useStore } from '../store'
export const ReactCounter = () => {
const { counter, setCounter } = useStore()
return (
<section className="react">
<img
src="/react.svg"
alt="React"
/>
<h1>
React Counter
</h1>
<p>
{counter}
</p>
<div>
<button onClick={() => setCounter(prev => prev - 1)}>
-
</button>
<button onClick={() => setCounter(prev => prev + 1)}>
+
</button>
</div>
</section>
)
}