❤
npm
Sign UpSign In

react-md
TypeScript icon, indicating that this package has built-in type declarations

5.1.6 • Public • Published

react-md license codecov Actions Status

npm downloads Join the Chat at Slack Donate

Create an accessible React application with the material design specifications and Scss.

Installation

react-md has been updated to use scoped packages starting with the v2 release to help slowly transition to the new components and API. If you do not need to slowly transition over this package can be used instead which is a convenience package for exporting all the functionality from a single entry point.

npm install --save react-md

or with yarn:

yarn add react-md

For convenience, here is a list of all the included react-md scoped packages and a link to their demo documentation page:

Highlights/Features

  • Matches the accessibility guidelines from www.w3.org
  • Low level customizable components
  • Easily themeable on a global and component level
  • Uses css variables for dynamic themes with fallbacks for older browsers
  • Out of the box dark theme mode support
  • Out of the box left-to-right and right-to-left language support
  • UMD Bundles and pre-compiled css available on https://unpkg.com (see more information here)
  • Written and maintained in Typescript

Creating a new project

Check out the examples folder to see completed examples with different build tools such as Next.js, Gatsby, and create-react-app.

First use create-react-app to create your project:

npx create-react-app my-app
cd my-app
npm start

npx comes with npm 5.2+ and higher, if you have an older version you will need to install create-react-app globally instead

Or with yarn:

yarn create react-app my-app
cd my-app

NOTE: You can also add the --typescript flag to bootstrap a react-app with typescript support

Next, install react-md and sass:

npm install --save react-md sass

Next, create a src/App.scss file to include all the react-md styles and import the App.scss file in the src/App.js:

@use "react-md" as *;

// this will include all the styles from react-md
@include react-md-utils;
+import './App.scss';
 import logo from './logo.svg';
 import './App.css';

Finally, update the public/index.html to include the Roboto font and the Material Icons font icons stylesheets from Google fonts:

     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.

       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body class="rmd-typography">

Once you have the styles, fonts, and font icons setup, you can start creating components from react-md. It is generally recommended to update your base src/App.js to include some default configuration components:

 import './App.scss';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer">
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+import {
+  Configuration,
+  Layout,
+  useLayoutNavigation,
+  Typography,
+  Button,
+} from 'react-md';
+
+// see @react-md/layout package for info on the main navigation
+const routes = {};
+function App() {
+  return (
+    <Configuration>
+      <Layout
+        title="My Title"
+        navHeaderTitle="My Nav Title"
+        treeProps={...useLayoutNavigation(routes, pathname)}
+      >
+        <Typography type="headline-4">Hello, world!</Typography>
+        <Button theme="primary">Example button</Button>
+      </Layout>
+    </Configuration>
+  );
+}

export default App;

More information can be found on the documentation site's page about creating projects

Library Size

The base react-md package (non-scoped) is the only package that also provides pre-built css themes and a UMD bundle. If you are interested in seeing what an estimated size for this library, check out the results below:

yarn dev-utils libsize

The gzipped UMD bundle sizes are:
 - dist/umd/react-md.production.min.js 92.51 kB
 - dist/umd/react-md-with-font-icons.production.min.js 211.46 kB
 - dist/umd/react-md-with-svg-icons.production.min.js 211.5 kB

The min and max gzipped CSS bundle sizes are:
 - themes/react-md.grey-red-700-light.min.css 18.08 kB
 - themes/react-md.lime-teal-200-dark.min.css 18.15 kB

Contributing

Please read the contributing guidelines if you would like to contribute.

Readme

Keywords

Package Sidebar

Install

npm i react-md

Repository

github.com/mlaursen/react-md

Homepage

react-md.dev

Weekly Downloads

5,833

Version

5.1.6

License

MIT

Unpacked Size

22.8 MB

Total Files

27

Last publish

Collaborators

  • mlaursen
Try on RunKit
Report malware