wehub-resource-sync
e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
58 lines
2.2 KiB
Plaintext
58 lines
2.2 KiB
Plaintext
---
|
|
title: Introduction
|
|
description: "tap: React hooks, headless"
|
|
---
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-[1fr_auto] items-center rounded-xl bg-fd-secondary overflow-hidden">
|
|
<div className="not-prose flex flex-col gap-1 pl-6 lg:pl-8 pt-4 lg:pt-0">
|
|
<p className="text-lg font-semibold">Quickstart</p>
|
|
<p className="text-fd-muted-foreground">Learn how to build your first resource with tap.</p>
|
|
<a href="/tap/docs/tap/quickstart" className="text-fd-primary font-medium mt-1 group inline-flex items-center gap-1">Get started <span className="inline-block transition-transform group-hover:translate-x-1">→</span></a>
|
|
</div>
|
|
<div className="mr-2 lg:mr-5 -my-5 lg:-my-2 lg:[&_pre]:pr-6">
|
|
|
|
```ts
|
|
import { resource } from "@assistant-ui/tap";
|
|
import { useState } from "react";
|
|
|
|
const useCounter = () => {
|
|
const [count, setCount] = useState(0);
|
|
|
|
return { count, increment: () => setCount((c) => c + 1) };
|
|
};
|
|
|
|
const Counter = resource(useCounter);
|
|
```
|
|
|
|
</div>
|
|
</div>
|
|
|
|
**tap is React's hooks, headless.** You write a `resource` the same way you write a
|
|
React component, with the same hooks (`useState`, `useEffect`, `useMemo`, ...)
|
|
imported from `"react"` and the same rules. The only difference is that a resource
|
|
has no UI: instead of returning JSX, it returns a plain value (state and methods),
|
|
and it runs anywhere, inside a React component, inside another resource, or
|
|
standalone with no React at all.
|
|
|
|
If you know React hooks, you already know tap. There are only three new things:
|
|
|
|
1. You write a `use`-prefixed hook and wrap it with `resource(useName)`; the unit
|
|
returns a value instead of JSX.
|
|
2. You instantiate it by calling the factory (`Name(props)`) to get an element,
|
|
then host it with [`useResource`](/tap/docs/tap/resources#hosting-a-resource).
|
|
3. A resource tree can run [outside React](/tap/docs/tap/outside-react) entirely.
|
|
|
|
## Next steps
|
|
|
|
<Cards>
|
|
<Card title="Quickstart" href="/tap/docs/tap/quickstart">
|
|
Install tap and build your first resource.
|
|
</Card>
|
|
<Card title="Resources" href="/tap/docs/tap/resources">
|
|
Author, compose, and host resources.
|
|
</Card>
|
|
<Card title="API Reference" href="/tap/docs/tap/api-reference">
|
|
Every export, in one place.
|
|
</Card>
|
|
</Cards>
|