React utilities for Rikta SSR framework - hooks and components for routing, data fetching, and server interaction
npm install @riktajs/reactReact utilities for Rikta SSR framework. Provides hooks for SSR data access, navigation, and server interactions using native browser APIs.
This package embraces the web platform by using native browser APIs for navigation:
- Use standard tags for links
- Use useNavigate() for programmatic navigation (uses window.location under the hood)
- Full page loads ensure SSR data is always fresh
``bash`
npm install @riktajs/reactor
pnpm add @riktajs/reactor
yarn add @riktajs/react
Wrap your app with RiktaProvider to enable all features:
`tsx
// entry-client.tsx
import { hydrateRoot } from 'react-dom/client';
import { RiktaProvider } from '@riktajs/react';
import App from './App';
hydrateRoot(
document.getElementById('root')!,
);
`
Use standard HTML anchor tags for navigation:
`tsx`
function Navigation() {
return (
);
}
For programmatic navigation, use the useNavigate() hook:
`tsx
import { useNavigate } from '@riktajs/react';
function MyComponent() {
const navigate = useNavigate();
const handleSubmit = async () => {
await saveData();
// Simple navigation
navigate('/success');
};
const handleSearch = (query: string) => {
// Navigation with query params - easy!
navigate('/search', { q: query, page: 1 });
// Results in: /search?q=query&page=1
};
const handleLogin = () => {
// Replace history entry (for redirects)
navigate('/dashboard', { replace: true });
};
return ;
}
`
Root provider component that enables all Rikta React utilities.
`tsx
import { RiktaProvider } from '@riktajs/react';
function App() {
return (
);
}
`
Programmatic navigation hook using native browser APIs.
`tsx
import { useNavigate } from '@riktajs/react';
function MyComponent() {
const navigate = useNavigate();
// Simple navigation
navigate('/dashboard');
// With query params
navigate('/search', { q: 'hello', page: 1 });
// Results in: /search?q=hello&page=1
// Replace history (no back button)
navigate('/login', { replace: true });
// Params + options
navigate('/items', { filter: 'active' }, { replace: true });
}
`
Access route parameters extracted from dynamic URLs.
`tsx
import { useParams } from '@riktajs/react';
// For route /item/:id
function ItemPage() {
const { id } = useParams<{ id: string }>();
return
// Multiple params - /users/:userId/posts/:postId
function PostPage() {
const { userId, postId } = useParams<{ userId: string; postId: string }>();
return
$3
Access and update URL search parameters.
tsx
import { useSearchParams } from '@riktajs/react';function SearchPage() {
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q') ?? '';
const page = parseInt(searchParams.get('page') ?? '1', 10);
const handleSearch = (newQuery: string) => {
setSearchParams({ q: newQuery, page: 1 });
};
return (
value={query}
onChange={(e) => handleSearch(e.target.value)}
/>
);
}
`$3
Access current location information directly from
.`tsx
import { useLocation } from '@riktajs/react';function Breadcrumbs() {
const { pathname, search, searchParams } = useLocation();
return (
);
}
`$3
Access SSR data passed from the server via
.`tsx
import { useSsrData } from '@riktajs/react';interface PageData {
title: string;
items: Array<{ id: string; name: string }>;
}
function ItemList() {
const ssrData = useSsrData();
if (!ssrData) {
return Loading...;
}
return (
{ssrData.data.title}
{ssrData.data.items.map(item => (
- {item.name}
))}
);
}
`$3
Track hydration state for handling SSR vs client rendering differences.
tsx
import { useHydration } from '@riktajs/react';function TimeDisplay() {
const { isHydrated, isServer } = useHydration();
// On server and initial render, show static content
if (!isHydrated) {
return Loading time...;
}
// After hydration, show dynamic content
return {new Date().toLocaleTimeString()};
}
`$3
Data fetching hook with loading and error states.
tsx
import { useFetch } from '@riktajs/react';function UserProfile({ userId }: { userId: string }) {
const { data, loading, error, refetch } = useFetch(
/api/users/${userId}
);
if (loading) return
if (error) return
if (!data) return null;
return (
{data.name}
);
}
$3
Execute server actions (mutations, form submissions).
tsx
import { useAction } from '@riktajs/react';function CreateItemForm() {
const { execute, pending, result } = useAction(
'/api/items',
{
onSuccess: (item) => console.log('Created:', item),
}
);
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
await execute({
name: formData.get('name') as string,
price: Number(formData.get('price')),
});
};
return (
);
}
`TypeScript Support
All hooks and components are fully typed. Export types are available:
tsx
import type {
SsrData,
ActionResult,
FetchState,
ActionState,
RiktaProviderProps,
HydrationState,
Location,
NavigateFn,
NavigateOptions,
} from '@riktajs/react';
`Migration from Previous Versions
If you were using the
component or useNavigation():$3
`tsx
import { Link, useNavigation } from '@riktajs/react';function Nav() {
const { navigate, pathname } = useNavigation();
return (
);
}
`$3
tsx
import { useNavigate, useLocation } from '@riktajs/react';function Nav() {
const navigate = useNavigate();
const { pathname } = useLocation();
return (
);
}
``MIT