Seleccionar página

Introducing Google’s Material Design library for React: material-ui

por | Sep 4, 2017

As you already know from my previous React article talking about the benefits and philosophy of React, the possibility for creating reusable web components is one of the main reasons for choosing React for your next web application. Since the born of React, developers have been creating tons of reusable web components that make your coder life easier. This time we’ll talk about material-ui, a set of react components that implement Google’s Material Design.

material-ui

 

What is Material Design?

Material Design can be considered as a visual philosophy developed by Google and used in most of their products (Gmail, YouTube, Google Drive, Google Docs, Google Maps, Inbox, Google+).

“Material Design (codenamed Quantum Paper)[1] is a design language developed in 2014 by Google. Expanding upon the «card» motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.” – Wikipedia

This design language has also been adopted by lots of developers and incorporated in their applications.

 

material-design

 

Why should I use material-ui?

If you are using React or you want to use it on your next project, you will face the problem of creating a nice and friendly user interface. Material Design can be the answer to this problem, and if you paid attention to React’s principles, you will rapidly start thinking about finding reusable components built by people who faced this problem before. And this is the point where you should seriously consider using material-ui as your component framework.

Installation

The installation should be straightforward for anyone used to install packages using NPM. This time it isn’t different and you only have to decide which version you want to install:

Stable channel

npm install material-ui

Pre-release channel

npm install material-ui@next

As the official documentation says: “Please note that @next will only point to pre-releases; to get the latest stable release use @latest instead.

Usage: Hello React!

In this section I will show you how to build a web component in a few lines using components provided by material-ui.

Once you have installed the package, the only condition to use material-ui is to import each component that you are going to use.

The following code shows how to use the AppBar component:

import React from 'react';
import AppBar from 'material-ui/AppBar';

/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const AppBarExampleIcon = () => (
  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
);

export default AppBarExampleIcon;
<pre>

The same would be for the Button component:

import React from 'react';
import FlatButton from 'material-ui/FlatButton';

const FlatButtonExampleSimple = () => (
  <div>
    <FlatButton label="Default" />
    <FlatButton label="Primary" primary={true} />
    <FlatButton label="Secondary" secondary={true} />
    <FlatButton label="Disabled" disabled={true} />
    <br />
    <br />
    <FlatButton label="Full width" fullWidth={true} />
  </div>
);

export default FlatButtonExampleSimple;

Maybe previous examples don’t show all the potential of the library, as they are quite simple to implement components. So, let’s go deeper!

Card component

One of the most used components from Material Design is the Card component. A Card is normally used as a an entry point to more detailed information. Even though there are different kind of cards, the typical ones include at least 3 elements:

  • Title
  • Content/Text
  • Actions and Links
  • (Optional) Image

In this case the library implements for us the complex details providing an easy to use component that can be instantiated in just a few lines:

import React from 'react';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';

const CardExampleWithAvatar = () => (
  <Card>
    <CardHeader
      title="URL Avatar"
      subtitle="Subtitle"
      avatar="images/jsa-128.jpg"
    />
    <CardMedia
      overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
    >
      <img src="images/nature-600-337.jpg" alt="" />
    </CardMedia>
    <CardTitle title="Card title" subtitle="Card subtitle" />
    <CardText>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
      Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
      Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
    </CardText>
    <CardActions>
      <FlatButton label="Action1" />
      <FlatButton label="Action2" />
    </CardActions>
  </Card>
);

export default CardExampleWithAvatar;

Each part of the Card (CardHeader, CardMedia, CardTitle, CardText and CardActions) is defined as a separate element and contains its own properties as it is shown in the code above.

Grid component

The Grid component is normally used for displaying multiple items with a repeating pattern.

As in the previous case, material-ui does the complex work for us and makes it simple to build a grid of elements with the desired pattern and data. We’ll need to pass to the component the data structure (array of elements) and define the aspect (pattern) of the items.

import React from 'react';
import {GridList, GridTile} from 'material-ui/GridList';
import IconButton from 'material-ui/IconButton';
import Subheader from 'material-ui/Subheader';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';

const styles = {
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
  },
  gridList: {
    width: 500,
    height: 450,
    overflowY: 'auto',
  },
};

const tilesData = [
  {
    img: 'images/grid-list/00-52-29-429_640.jpg',
    title: 'Breakfast',
    author: 'jill111',
  },
  {
    img: 'images/grid-list/burger-827309_640.jpg',
    title: 'Tasty burger',
    author: 'pashminu',
  },
  {
    img: 'images/grid-list/camera-813814_640.jpg',
    title: 'Camera',
    author: 'Danson67',
  },
  {
    img: 'images/grid-list/morning-819362_640.jpg',
    title: 'Morning',
    author: 'fancycrave1',
  },
  {
    img: 'images/grid-list/hats-829509_640.jpg',
    title: 'Hats',
    author: 'Hans',
  },
  {
    img: 'images/grid-list/honey-823614_640.jpg',
    title: 'Honey',
    author: 'fancycravel',
  },
  {
    img: 'images/grid-list/vegetables-790022_640.jpg',
    title: 'Vegetables',
    author: 'jill111',
  },
  {
    img: 'images/grid-list/water-plant-821293_640.jpg',
    title: 'Water plant',
    author: 'BkrmadtyaKarki',
  },
];

/**
 * A simple example of a scrollable `GridList` containing a [Subheader](/#/components/subheader).
 */
const GridListExampleSimple = () => (
  <div style={styles.root}>
    <GridList
      cellHeight={180}
      style={styles.gridList}
    >
      <Subheader>December</Subheader>
      {tilesData.map((tile) => (
        <GridTile
          key={tile.img}
          title={tile.title}
          subtitle={<span>by <b>{tile.author}</b></span>}
          actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
        >
          <img src={tile.img} />
        </GridTile>
      ))}
    </GridList>
  </div>
);

export default GridListExampleSimple;

What’s next

In this article you have discovered a new way of building rapidly modern user interfaces that follows the Material Design guidelines. You know now how to install and use the built-in React components provided by material-ui library. So, what’s next? I recommend you experimenting with different components explained on the official documentation and, after you feel comfortable with the library, try cloning an existing web application or website that uses Material Design (there are a lot! Google I/O, Material Up, Android.com, Angular.io, …).

Happy coding!

 

If you want more articles + tutorials like this, subscribe to my newsletter – I send out a new one every week or so. Remember, if you liked the article you can share it using the buttons below!

Sources