clear-react-router 1.6.4 → 1.6.5

package/README.md

@@ -59,7 +59,7 @@ The root component that provides routing context to the application. Place stati
 | `context` | `object` | `{}` | Initial context (user, theme, etc.) |
 | `children` | `ReactNode` | required | App content (must include `<Router />`) |
 
-```
+```tsx
 function App() {
   return (
     <RouterProvider routeList={routes}>
@@ -88,7 +88,7 @@ Renders the current route's component. Must be placed inside `<RouterProvider>`.
 | `hoverPrefetchDelay` | `number` | `150` | Delay in milliseconds before prefetching on hover (only for `'hover'` strategy) |
 | `errorBoundary` | `ComponentType<{ children: ReactNode }>` | `undefined` | Custom error boundary component for catching render errors in route components |
 
-```
+```tsx
 <RouterProvider routes={routes}>
   <Navbar />
   <Router spinner={false} isAnimated />  {/* disable the spinner */}
@@ -119,7 +119,7 @@ Component for client-side navigation with prefetch support.
 
 **Example:**
 
-```
+```tsx
 import { RouterProvider, Router, Link } from 'clear-react-router';
 
 // Global prefetch: hover with 100ms delay
@@ -145,7 +145,7 @@ Function provided to `beforeLoad` for programmatic redirection.
 
 **Type:** `(arg: Location | string) => Promise<void>`
 
-```
+```tsx
 import type { createRouter } from 'clear-react-router';
 
 const routes = createRouter([
@@ -189,7 +189,9 @@ const routes = createRouter([
 
 The `loader`, `beforeLoad`, and `afterLoad` hooks receive `params` (extracted from the URL) and `context` as arguments. This allows you to handle route-specific logic directly in the route configuration, keeping your components focused on rendering.
 
-```
+```tsx
+import type { createRouter } from 'clear-react-router';
+
 const routes = createRouter([
   {
     path: '/user/:userId',
@@ -240,7 +242,7 @@ const App = () => (
 
 Returns function to navigate programmatically. Accepts a string (pathname), an object with `pathname`, `search`, and `state`, or `-1` to go back.
 
-```
+```tsx
 const navigate = useNavigate();
 
 navigate('/about');                                           // string
@@ -250,7 +252,7 @@ navigate(-1);                                                 // go back
 
 **Note:** Navigation state can be accessed via `useLocation()`:
 
-```
+```tsx
 const navigate = useNavigate();
 navigate({ pathname: '/profile', state: { userId: 123 } });
 
@@ -263,7 +265,7 @@ console.log(state); // { userId: 123 }
 
 Returns route parameters object.
 
-```
+```tsx
 const params = useParams<{ userId: string }>();
 // URL: /user/123 → params.userId === '123'
 ```
@@ -271,7 +273,7 @@ const params = useParams<{ userId: string }>();
 ### `useLocation()`
 
 Returns current location `{ pathname, search, state }`.
-```
+```tsx
 const { pathname, search, state } = useLocation();
 ```
 
@@ -287,7 +289,7 @@ Returns the cached data loaded by the current route's `loader`, along with any e
 | `loaderError` | `Error \| null` | Error from the `loader` (if any) |
 | `beforeLoadError` | `Error \| null` | Error from the `beforeLoad` hook (if any) |
 
-```
+```tsx
 const UserProfile = () => {
   const { data, loaderError, beforeLoadError } = useLoaderState<User>();
 ```
@@ -380,7 +382,7 @@ Blocks navigation when callback returns `true`.
 | `process()` | `() => void` | Confirm navigation and proceed |
 | `reset()` | `() => void` | Cancel navigation |
 
-```
+```tsx
 const { state, process, reset } = useBlocker(() => hasUnsavedChanges);
 
 useEffect(() => {
@@ -407,7 +409,7 @@ Executes a callback when the page is about to be closed or reloaded. Perfect for
 
 **Note:** This hook does not show a browser confirmation dialog. It silently executes the callback, allowing you to save user data in the background before the page closes.
 
-```
+```tsx
 const [text, setText] = useState('');
 const onSave = useCallback(() => {
   localStorage.setItem('draft', text);
@@ -422,7 +424,7 @@ useBeforeUnload(text ? onSave : undefined);
 
 A flexible hook for working with typed query parameters. You provide an adapter object with `parse` and `serialize` functions, and it returns the parsed value and a setter.
 
-```
+```tsx
 import { useQueryParam, adapter } from 'clear-react-router';
 
 const ProductPage = () => {
@@ -486,7 +488,7 @@ type Adapter<T> = {
 ### Using Zod Schemas
 `useQueryParam` works seamlessly with Zod for complex validation:
 
-```
+```tsx
 import { z } from 'zod';
 import { useQueryParam, adapter } from 'clear-react-router';
 
@@ -518,7 +520,7 @@ function ProductFilter() {
 ### Custom Adapters
 You can write your own adapter for any format:
 
-```
+```tsx
 // Custom adapter for comma-separated values
 const csvAdapter = {
   parse: (params: string[]): string[] => {
@@ -537,7 +539,7 @@ const TagsFilter() {
 ### `useRouterContext()`
 
 Returns the router context object and a function to update it. Useful for accessing or modifying global state (like user authentication, theme, etc.) from anywhere in your app.
-```
+```tsx
 const { setContext, context } = useRouterContext();
 const loginHandler = () => setContext({ ...context, user: { name: 'John' } });
 ```
@@ -546,7 +548,7 @@ const loginHandler = () => setContext({ ...context, user: { name: 'John' } });
 
 Returns an object for working with URL query parameters. Supports reading and setting both single values and arrays.
 
-```
+```tsx
 import { useSearchParams } from 'clear-react-router';
 
 function ProductFilter() {
@@ -603,7 +605,7 @@ Returns an array of pathnames representing the user's actual navigation history.
 ## Lazy Loading
 
 Clear Router supports code-splitting out of the box. Simply pass a function that returns a dynamic import:
-```
+```tsx
 {
   path: '/heavy-page',
   element: () => import('./pages/HeavyComponent'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clear-react-router",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
   "scripts": {