Create an accessible React application with the material design specifications and Scss.
react-md
library and sizes for some of the pre-built css files.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:
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-appglobally instead
Or with yarn:
yarn create react-app my-app
cd my-app
NOTE: You can also add the
--typescriptflag 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
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
Please read the contributing guidelines if you would like to contribute.
FAQs
This is the full react-md library bundled together for convenience.
We found that react-md demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.