@ereo/client

Client-side runtime for the EreoJS framework. Includes islands architecture, client-side navigation, prefetching, forms, and error boundaries.

Installation

``bash
bun add @ereo/client
`

Quick Start

`typescript
import { initClient, Link, useLoaderData } from '@ereo/client';

// Initialize the client runtime
initClient();

// Use loader data in components
function UserProfile() {
const { user } = useLoaderData<{ user: { name: string } }>();
return

{user.name}

;
}

// Client-side navigation with prefetching
function Nav() {
return Dashboard;
}
`

Key Features

- Islands Architecture - Partial hydration with createIsland and hydrateIslands
- Client Navigation - SPA-like navigation with navigate, goBack, goForward
- Prefetching - Smart prefetching with prefetch, hover and viewport strategies
- Data Hooks - useLoaderData, useActionData, useNavigation, useError
- Link Components - Link and NavLink with active state detection
- Forms - Enhanced forms with Form, useSubmit, useFetcher
- Error Boundaries - Graceful error handling with ErrorBoundary and RouteErrorBoundary
- Scroll Restoration - Automatic scroll position management

Forms Example

`tsx
import { Form, useSubmit, useNavigation } from '@ereo/client';

function ContactForm() {
const submit = useSubmit();
const navigation = useNavigation();
const isSubmitting = navigation.state === 'submitting';

return (





{isSubmitting ? 'Sending...' : 'Send'}


);
}


`

Islands

`tsx
import { createIsland } from '@ereo/client';
import Chart from './Chart';

// Create an island wrapper for selective hydration
const InteractiveChart = createIsland(Chart, 'Chart');

// Use with hydration directives
function Page() {
return (



);
}
``

Documentation

For full documentation, visit https://ereojs.dev/docs/client

Part of EreoJS

This package is part of the EreoJS monorepo - a modern full-stack framework built for Bun.

License

MIT