> ## Documentation Index
> Fetch the complete documentation index at: https://juo.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Preact

> Render blocks with Preact. Same hook shape as React, with a smaller runtime.

`@juo/blocks/preact` mirrors the React adapter but uses Preact's renderer and hook runtime. Use it for the React-style component model with a smaller payload — typical for checkout extensions and theme overlays.

```sh theme={null}
pnpm add preact
```

The patterns below extend the [Blocks](/docs/blocks/concepts/blocks), [Reactivity](/docs/blocks/concepts/reactivity), and [Contexts](/docs/blocks/concepts/contexts) concept pages with Preact-specific equivalents.

## Defining a Preact block

```tsx theme={null}
import { defineBlock, registerBlock } from "@juo/blocks";
import { createPreactRenderer } from "@juo/blocks/preact";
import { Toast } from "./Toast";

export const ToastBlock = defineBlock("Toast", {
  group: "theme",
  schema: /* ... */,
  initialValue: () => ({ props: { tone: "info", message: "Saved" } }),
  renderer: createPreactRenderer(Toast),
});

registerBlock(ToastBlock);
```

```tsx theme={null}
// Toast.tsx (Preact)
export function Toast({ tone, message }: { tone: string; message: string }) {
  return <div class={`toast toast--${tone}`}>{message}</div>;
}
```

## Reading services with `useContext`

Identical surface to the React adapter — `useContext` returns a proxy that exposes signals as `[value, setValue]` tuples:

```tsx theme={null}
import { useContext } from "@juo/blocks/preact";
import { CustomerServiceContext } from "@juo/blocks";

export function CustomerGreeting() {
  const customer = useContext(CustomerServiceContext);
  const [current] = customer.current;

  return <p>Hello, {current?.name ?? "guest"}</p>;
}
```

## `useSignal`

```tsx theme={null}
import { useSignal } from "@juo/blocks/preact";
import { signal } from "@juo/blocks";

const counter = signal(0);

export function Counter() {
  const value = useSignal(counter);
  return <button onClick={() => (counter.value = value + 1)}>{value}</button>;
}
```

## Providing contexts

```tsx theme={null}
import { useProvideContext } from "@juo/blocks/preact";
import { CartContext, createCart } from "./cart";

export function CartProvider({ children }) {
  useProvideContext(CartContext, createCart());
  return <>{children}</>;
}
```

## React vs Preact

The two adapters expose the same APIs. Choose Preact when:

* A smaller bundle is needed (checkout UI extensions, theme widgets).
* The project is already in a Preact context (some Shopify surfaces).
* React-only ecosystem packages aren't required.

Otherwise, prefer React for broader ecosystem compatibility.