Nearly Past Midnight

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

    5.1.4 • 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 91.56 kB
     - dist/umd/react-md-with-font-icons.production.min.js 203.98 kB
     - dist/umd/react-md-with-svg-icons.production.min.js 204.03 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.

    Install

    npm i react-md

    Homepage

    react-md.dev

    DownloadsWeekly Downloads

    9,292

    Version

    5.1.4

    License

    MIT

    Unpacked Size

    22.7 MB

    Total Files

    27

    Last publish

    Collaborators

    • mlaursen