@arielgonzaguer/michi-router 1.0.0 → 1.0.1

package/README.md

@@ -45,6 +45,44 @@ function NavigateButton() {
 }
 ```
 
+### Usando un Layout General
+
+Puedes aplicar un layout común a todas tus rutas:
+
+```jsx
+import { RouterProvider } from "@arielgonzaguer/michi-router";
+import MainLayout from "./layouts/MainLayout";
+
+const routes = [
+  { path: "/", component: <Home /> },
+  { path: "/about", component: <About /> },
+];
+
+function App() {
+  return (
+    <RouterProvider routes={routes} layout={MainLayout}>
+      <div>404: Page not found</div>
+    </RouterProvider>
+  );
+}
+
+// Ejemplo de un componente Layout
+function MainLayout({ children }) {
+  return (
+    <div className="layout">
+      <header>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+        </nav>
+      </header>
+      <main>{children}</main>
+      <footer>Michi-router 😸</footer>
+    </div>
+  );
+}
+```
+
 ## API
 
 ### `<RouterProvider>`
@@ -55,6 +93,7 @@ Componente principal para el enrutamiento.
 
 - `routes`: Array de objetos con `path` y `component`
 - `children`: Elemento a mostrar cuando no hay ruta coincidente
+- `layout`: Componente opcional que funciona como layout general para todas las rutas
 
 ### `<Link>`
 

package/dist/michi-router/Michi-router.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import type { RouterContextType, RouterProviderProps, LinkProps } from './types';
 declare const RouterContext: React.Context<RouterContextType>;
-export declare function RouterProvider({ routes, children }: RouterProviderProps): React.JSX.Element;
+export declare function RouterProvider({ routes, children, layout: Layout }: RouterProviderProps & {
+    layout?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+}): React.JSX.Element;
 export declare const Link: ({ to, children, className }: LinkProps) => React.JSX.Element;
 export declare const useNavigate: () => (to: string) => void;
 export { RouterContext };

package/dist/michi-router/Michi-router.js

@@ -13,7 +13,7 @@ var RouterContext = (0, react_2.createContext)({
 });
 exports.RouterContext = RouterContext;
 function RouterProvider(_a) {
-    var routes = _a.routes, children = _a.children;
+    var routes = _a.routes, children = _a.children, Layout = _a.layout;
     var _b = (0, react_2.useState)(window.location.pathname), path = _b[0], setPath = _b[1];
     (0, react_2.useEffect)(function () {
         var handlePopState = function () { return setPath(window.location.pathname); };
@@ -25,7 +25,8 @@ function RouterProvider(_a) {
         setPath(to);
     };
     var currentRoute = routes.find(function (route) { return route.path === path; });
-    return (react_1.default.createElement(RouterContext.Provider, { value: { path: path, navigate: navigate } }, currentRoute ? currentRoute.component : children));
+    var routeContent = currentRoute ? currentRoute.component : children;
+    return (react_1.default.createElement(RouterContext.Provider, { value: { path: path, navigate: navigate } }, Layout ? (react_1.default.createElement(Layout, null, routeContent)) : (routeContent)));
 }
 exports.RouterProvider = RouterProvider;
 var Link = function (_a) {

package/dist/michi-router/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 export interface Route {
     path: string;
     component: ReactNode;
@@ -8,8 +8,14 @@ export interface RouterContextType {
     navigate: (to: string) => void;
 }
 export interface RouterProviderProps {
-    routes: Route[];
-    children?: ReactNode;
+    routes: Array<{
+        path: string;
+        component: React.ReactNode;
+    }>;
+    children?: React.ReactNode;
+    layout?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
 }
 export interface LinkProps {
     to: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arielgonzaguer/michi-router",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "The minimalist and simple router for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",