Package Exports

@react-md/link

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.

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 with react-router

import React, { FunctionComponent } from "react";
import { render } from "react-dom";
import {
  Link as ReactRouterLink,
  LinkProps as ReactRouterLinkProps,
  BrowserRouter,
} from "react-router-dom";
import { Link as ReactMDLink, LinkProps as RMDLinkProps } from "@react-md/link";

export type LinkProps = RDMLinkProps & ReactRouterLinkProps;

const Link: FunctionComponent<LinkProps> = props => (
  <ReactMDLink {...props} component={ReactRouterLink} />
);

const Home = () => <h1>Home page!</h1>;
const About = () => <h1>About page!</h1>;

const App = () => (
  <BrowserRouter>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </BrowserRouter>
);

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