[](https://www.npmjs.com/package/@hateoas-ts/resource-react) [](https://www.npmjs.com/package/@hateoas





React hooks for type-safe HATEOAS API navigation. Built on top of @hateoas-ts/resource.
``bash`
npm install @hateoas-ts/resource-react @hateoas-ts/resource
`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 (
);
}
`
`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 }>;
`
`tsx
import { useResource, useInfiniteCollection, useClient } from '@hateoas-ts/resource-react';
function UserProfile({ userId }: { userId: string }) {
const client = useClient();
const userResource = client.go);
// Fetch single resource
const { loading, error, data } = useResource(userResource);
if (loading) return
return
function ConversationList({ userId }: { userId: string }) {
const client = useClient();
const userResource = client.go);
// Fetch paginated collection with infinite scroll
const { items, loading, hasNextPage, loadNextPage } = useInfiniteCollection(userResource.follow('conversations'));
return (
API Reference
$3
| 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
Welcome, {data.name}!;
}function App() {
return (
Loading...
Return Types
$3
`typescript
{
loading: boolean; // Loading state (useResource only)
error: Error | null; // Error if request failed
data: T['data']; // Entity data
resourceState: State; // Full state with links
resource: Resource; // Resource for further navigation
}
`$3
`typescript
{
items: State[]; // Accumulated collection items
loading: boolean; // Loading state (non-suspense only)
isLoadingMore: boolean; // Loading more pages (suspense only)
hasNextPage: boolean; // More pages available
error: Error | null; // Error if request failed
loadNextPage: () => void; // Load next page
}
`Related
@hateoas-ts/resource` - Core HATEOAS clientMIT