Getting Started with Preact
Start by installing the Preact renderer into your app.
Using Starbeam
tsx
import {createCell } from "@starbeam/preact";import {render } from "preact";export functionCounter () {constcounter =createCell (0);return (<div ><button onClick ={() =>counter .update ((c ) =>c + 1)}>++</button ><p >{counter .current }</p ></div >);}render (<Counter />,document .querySelector ("#root"));
tsx
import {createCell } from "@starbeam/preact";import {render } from "preact";export functionCounter () {constcounter =createCell (0);return (<div ><button onClick ={() =>counter .update ((c ) =>c + 1)}>++</button ><p >{counter .current }</p ></div >);}render (<Counter />,document .querySelector ("#root"));
tsx
import {createCell } from "@starbeam/preact";import {render , typeJSX } from "preact";export functionCounter ():JSX .Element {constcounter =createCell (0);return (<div ><button onClick ={() =>counter .update ((c ) =>c + 1)}>++</button ><p >{counter .current }</p ></div >);}render (<Counter />,document .querySelector ("#root")!);
tsx
import {createCell } from "@starbeam/preact";import {render , typeJSX } from "preact";export functionCounter ():JSX .Element {constcounter =createCell (0);return (<div ><button onClick ={() =>counter .update ((c ) =>c + 1)}>++</button ><p >{counter .current }</p ></div >);}render (<Counter />,document .querySelector ("#root")!);
This is the most basic way to use Starbeam in a Preact app.
The use
Hook
The @starbeam/preact
renderer also includes a use
hook, which allows you to attach Starbeam resources into a Preact app. Resources are instantiated when the component is mounted, and cleaned up when the component is unmounted.
To get an idea for how it works, we'll integrate the Stopwatch resource from the Guides section into Preact.
As a quick refresher, here's what the resource looks like:
tsx
import {Cell ,Formula ,Resource ,} from "@starbeam/universal";constStopwatch =Resource (({on }) => {consttime =Cell (newDate ());constinterval =setInterval (() => {time .set (newDate ());});on .cleanup (() => {return () =>clearInterval (interval );});returnFormula (() => {constnow =time .current ;return newIntl .DateTimeFormat ("en-US", {hour : "numeric",minute : "numeric",second : "numeric",hour12 : false,}).format (now );});});
tsx
import {Cell ,Formula ,Resource ,} from "@starbeam/universal";constStopwatch =Resource (({on }) => {consttime =Cell (newDate ());constinterval =setInterval (() => {time .set (newDate ());});on .cleanup (() => {return () =>clearInterval (interval );});returnFormula (() => {constnow =time .current ;return newIntl .DateTimeFormat ("en-US", {hour : "numeric",minute : "numeric",second : "numeric",hour12 : false,}).format (now );});});
The resource creates a cell that holds the current date, but waits to set up the interval until the component that uses the resource is mounted.
Once the component is mounted, the resource creates an timer that will update the time
cell once per second. It also specifies a cleanup function that will run when the component that uses the resource is unmounted.
Next, we'll use the use
hook to integrate it into a Preact component.
tsx
import {use } from "@starbeam/preact";export constClock = () => {consttime =use (Stopwatch );return <div >{time ?? "now"}</div >;};
tsx
import {use } from "@starbeam/preact";export constClock = () => {consttime =use (Stopwatch );return <div >{time ?? "now"}</div >;};
The use
hook constructs the resource for us and integrates it into the component's lifecycle. That's the magic of Starbeam resources: they're written without any special knowledge of the quirks of any particular framework, but they can be deeply integrated into any framework.