This package is used to configure most of react-md as well as create some pre-defined layouts
npm install @react-md/layoutCreate your app's layout and configure all of react-md in one place. There are
eight different types of layouts supported that change automatically based on
the window size and have reasonable defaults to get you started. The base layout
will create a persistent navigation tree with a fixed header on desktop, while
the navigation tree will be toggleable in a sliding sheet on mobile.
``sh`
npm install --save @react-md/layout
Since this package is more for general layout and configuration of components,
it is highlight recommended to install the following packages as well:
`sh`
npm install --save @react-md/app-bar \
@react-md/button \
@react-md/dialog \
@react-md/icon \
@react-md/list \
@react-md/sheet \
@react-md/states \
@react-md/theme \
@react-md/tooltip \
@react-md/transition \
@react-md/typography \
@react-md/utils
You should check out the
full documentation for live
examples and more customization information, but an example usage is shown
below.
The main exports for this package are the Configuration component, LayoutuseLayoutNavigation
component, and hook. The Configuration component shouldreact-md
be mounted near the root of your app as it is a nice wrapper for all the
required React Context providers to work within .
`tsx
import { render } from "react-dom";
import { Configuration } from "@react-md/layout";
import App from "./App";
render(
document.getElementById("root")
);
`
Once your app has the base Configuration, you can create your base layout withLayout
the component along with a navigation tree by using theuseLayoutNavigation hook. The useLayoutNavigation hook requires you to passnavItems
your along with the current pathname to work correctly. This means
you'll want to get the pathname from your favorite routing library
(react-router for example) so
that the current route will automatically be selected.
`tsx
import type { ReactElement } from "react";
import {
Layout,
LayoutNavigationTree,
useLayoutNavigation,
} from "@react-md/layout";
import {
AppsSVGIcon,
BookSVGIcon,
HomeSVGIcon,
MenuSVGIcon,
TVSVGIcon,
} from "@react-md/material-icons";
import { Typography } from "@react-md/typography";
import {
BrowserRouter,
Link,
Routes,
Route,
useLocation,
} from "react-router-dom";
const navItems: LayoutNavigationTree = {
"/": {
itemId: "/",
parentId: null,
children: "Home",
leftAddon:
to: "/",
},
"/route-1": {
itemId: "/route-1",
parentId: null,
children: "Route 1",
leftAddon:
to: "/route-1",
},
"/route-2": {
itemId: "/route-2",
parentId: null,
children: "Route 2",
leftAddon:
to: "/route-2",
},
"/route-3": {
itemId: "/route-3",
parentId: null,
children: "Route 3",
leftAddon:
to: "/route-3",
},
};
function Home(): ReactElement {
return
}
function Route1(): ReactElement {
return
}
function Route2(): ReactElement {
return
}
function Route3(): ReactElement {
return
}
function App(): ReactElement {
const { pathname } = useLocation();
return (
navHeaderTitle="Example Nav Title"
treeProps={useLayoutNavigation(navItems, pathname, Link)}
>
);
}
export default function MyApp(): ReactElement {
return (
);
}
``