@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

``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
`

Documentation

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

Usage

$3

`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

Home page!

render(, document.getElementById("root"));
`

$3

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 {
return (
id="full-page-dialog"
aria-labelledby="full-page-dialog-title"
visible
onRequestClose={noop}
>


{/ pretend 100 focusable things before main content /}




Here is some content

render(, document.getElementById("root"));
``