Package Exports

@react-md/link
@react-md/link/es/index.js
@react-md/link/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-md/link) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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"));