The base package for including a theme for react-md. This is required by most other packages.
npm install @react-md/linkCreate simple links from react-md with a customizable theme. The provided Link
component can easily integrate with
react-router,
@reach/router, and theoretically any other
routing library if needed.
This package also exports a great screen-reader and keyboard accessibility
helper: SkipToMainContent that will allow a user to immediately jump to the
main content of the page.
``sh`
npm install --save @react-md/link
It is also recommended to install the following packages to the full experience.
`sh`
npm install --save @react-md/theme @react-md/typography
You should check out the
full documentation for live examples
and more customization information, but an example usage is shown below.
`tsx
import type { ReactElement } from "react";
import { render } from "react-dom";
import {
Link as ReactRouterLink,
LinkProps as ReactRouterLinkProps,
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import { Link as ReactMDLink, LinkProps as RMDLinkProps } from "@react-md/link";
export type LinkProps = RDMLinkProps & ReactRouterLinkProps;
function Link(props: linkProps): ReactElement {
return
}
function Home(): ReactElement {
return
function About(): ReactElement {
return
function App(): ReactElement {
return (
Home
About
);
}
render(
`
If you are using the @react-md/layout package, this component is already
built-in to help out! However, this component can also be used within full page
dialogs or custom screens to be able to jump to a specific element in the page.
`tsx
import type { ReactElement } from "react";
import { render } from "react-dom";
import {
Dialog,
DialogHeader,
DialogContent,
DialogFooter,
} from "@react-md/dialog";
import { SkipToMainContent } from "@react-md/link";
const noop = (): void => {};
function App(): ReactElement { Here is some content
return (
id="full-page-dialog"
aria-labelledby="full-page-dialog-title"
visible
onRequestClose={noop}
>
{/ pretend 100 focusable things before main content /}
);
}
render(
``