@hateoas-ts/resource-react


Language: English | 中文

React hooks for type-safe HATEOAS API navigation. Built on top of @hateoas-ts/resource.

Installation

``bash
npm install @hateoas-ts/resource-react @hateoas-ts/resource
`

Quick Start

$3

`tsx
import { createClient } from '@hateoas-ts/resource';
import { ResourceProvider } from '@hateoas-ts/resource-react';

const client = createClient({ baseURL: 'https://api.example.com' });

function App() {
return (



);
}
`

$3

`typescript
import { Entity, Collection } from '@hateoas-ts/resource';

export type User = Entity<{ id: string; name: string; email: string }, { self: User; conversations: Collection }>;

export type Conversation = Entity<{ id: string; title: string }, { self: Conversation }>;
`

$3

`tsx
import { useResource, useInfiniteCollection, useClient } from '@hateoas-ts/resource-react';

function UserProfile({ userId }: { userId: string }) {
const client = useClient();
const userResource = client.go(/api/users/${userId});

// Fetch single resource
const { loading, error, data } = useResource(userResource);

if (loading) return

function ConversationList({ userId }: { userId: string }) {
const client = useClient();
const userResource = client.go(/api/users/${userId});

// Fetch paginated collection with infinite scroll
const { items, loading, hasNextPage, loadNextPage } = useInfiniteCollection(userResource.follow('conversations'));

return (


| Export | Description |
| ------------------ | ----------------------------------- |
| ResourceProvider | Context provider for HATEOAS client |

$3

| Hook | Description |
| --------------------------------- | ----------------------------------------------- |
| useClient() | Access the client instance |
| useResource(resource) | Fetch a single resource |
| useInfiniteCollection(resource) | Fetch paginated collection with infinite scroll |

$3

| Hook | Description |
| ----------------------------------------- | -------------------------------------- |
| useSuspenseResource(resource) | Suspense-enabled single resource fetch |
| useSuspenseInfiniteCollection(resource) | Suspense-enabled infinite scroll |

$3

`tsx
import { Suspense } from 'react';
import { useSuspenseResource, useClient } from '@hateoas-ts/resource-react';

function UserProfile({ userId }: { userId: string }) {
const client = useClient();
const { data } = useSuspenseResource(client.go(/api/users/${userId}));

// No loading check - suspends until ready
return