@react-md/link

Create 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.

Installation

npm install --save @react-md/link

It is also recommended to install the following packages to the full experience.

npm install --save @react-md/theme @react-md/typography

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

Usage with react-router

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 <ReactMDLink {...props} component={ReactRouterLink} />;
}

function Home(): ReactElement {
  return <h1>Home page!</h1>;
}

function About(): ReactElement {
  return <h1>About page!</h1>;
}

function App(): ReactElement {
  return (
    <BrowserRouter>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

render(<App />, document.getElementById("root"));

SkipToMainContent

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.

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 {
  return (
    <Dialog
      id="full-page-dialog"
      aria-labelledby="full-page-dialog-title"
      visible
      onRequestClose={noop}
    >
      <DialogHeader>
        <SkipToMainContent mainId="full-page-dialog-content" />
        {/* pretend 100 focusable things before main content */}
      </DialogHeader>
      <DialogContent id="full-page-dialog-content">
        <p>Here is some content</p>
      </DialogContent>
    </Dialog>
  );
}

render(<App />, document.getElementById("root"));