v2 is still in alpha, but nearing completion. Please see the v1 documentation site and branch until then.
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
- Working from v1 - How to use
migrate from v1 of
react-mdto 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-mdlibrary and sizes for some of the pre-built css files.
- 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
First use create-react-app to create your project:
$ npx create-react-app my-app
$ cd my-app
$ npm startnpx comes with npm 5.2+ and higher, if you have an older version you will need to install
create-react-appglobally instead
Or with yarn:
$ yarn create react-app my-app
$ cd my-appNOTE: You can also add the
--typescriptflag to bootstrap a react-app with typescript support
Next, install react-md and node-sass:
$ npm install --save react-md node-sassNext, create a src/App.scss file to include all the react-md styles and
import the App.scss file in the src/App.js:
@import "~react-md/dist/scss/react-md";
// this will include all the styles from react-md
@include react-md-utils; import React from 'react';
import logo from './logo.svg';
import './App.css';
+import './App.scss';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 React from 'react';
-import logo from './logo.svg';
-import './App.css';
-import './App.scss';
-
-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';
+import './App.scss';
+
+// see @react-md/layout package for info on the main navigation
+const routes = {};
+function App() {
+ return (
+ <Configuration>
+ <Layout
+ {...useLayoutNavigation(routes, pathname)}
+ appBarTitle="My App"
+ navHeaderTitle="My App"
+ >
+ <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
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 size is:
- dist/umd/react-md.production.min.js 55 B
The min and max gzipped CSS bundle sizes are:
- dist/css/react-md.red-lime-100-light.min.css 61 B
- dist/css/react-md.deep_orange-blue_grey-100-light.min.css 76 BPlease read the contributing guidelines if you would like to contribute.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent