Client-side runtime for the EreoJS framework. Includes islands architecture, client-side navigation, prefetching, forms, and error boundaries.
npm install @ereo/clientClient-side runtime for the EreoJS framework. Includes islands architecture, client-side navigation, prefetching, forms, and error boundaries.
``bash`
bun add @ereo/client
`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
// Client-side navigation with prefetching
function Nav() {
return Dashboard;
}
`
- Islands Architecture - Partial hydration with createIsland and hydrateIslandsnavigate
- Client Navigation - SPA-like navigation with , goBack, goForwardprefetch
- Prefetching - Smart prefetching with , hover and viewport strategiesuseLoaderData
- Data Hooks - , useActionData, useNavigation, useErrorLink
- Link Components - and NavLink with active state detectionForm
- Forms - Enhanced forms with , useSubmit, useFetcherErrorBoundary
- Error Boundaries - Graceful error handling with and RouteErrorBoundary
- Scroll Restoration - Automatic scroll position management
`tsx
import { Form, useSubmit, useNavigation } from '@ereo/client';
function ContactForm() {
const submit = useSubmit();
const navigation = useNavigation();
const isSubmitting = navigation.state === 'submitting';
return (
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 (
Dashboard
);
}
``For full documentation, visit https://ereojs.dev/docs/client
This package is part of the EreoJS monorepo - a modern full-stack framework built for Bun.
MIT