react-md

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

Installing packages - How to install related components and packages within react-md for building your application
Creating a new app - How to create a new app with react-md
Examples with Build Tools - View and download examples of using ReactMD with build tools such as create-react-app, Next.js, and Gatsby
Working from v1 - How to use migrate from v1 of react-md to v2.
Customizing your theme - How to implement a different theme for your React application
Full documentation - All the remaining documentation along with every single guide, API Reference, and examples
Library Size - The UMD bundle size for the entire react-md library and sizes for some of the pre-built css files.

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 React from 'react';
 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 React from 'react';
-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,
+  Text,
+  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)}
+      >
+        <Text type="headline-4">Hello, world!</Text>
+        <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 86.75 KB
 - dist/umd/react-md-with-font-icons.production.min.js 111.03 KB
 - dist/umd/react-md-with-svg-icons.production.min.js 176.83 KB

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

Contributing

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