Package Exports

@react-md/avatar
@react-md/avatar/es/index.js
@react-md/avatar/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-md/avatar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@react-md/avatar

Create avatars to represent people or objects with images, icons, or text. Different theme colors can also be applied for icons or text.

Installation

npm install --save @react-md/avatar

It is generally recommended to also install the following packages since they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/list \
  @react-md/icon

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

One of the main use-cases will probably be to display a list of people with specific avatars with them:

import { render } from "react-dom";
import { Avatar } from "@react-md/avatar";
import { List, ListItem } from "@react-md/list";

const people = [
  { name: "Logan Tyler", avatarUrl: "https://some-picture.com" },
  { name: "Trenton Berry", avatarUrl: "https://some-picture.com" },
  { name: "Damon Fletcher", avatarUrl: "https://some-picture.com" },
  { name: "Thomas Owen", avatarUrl: "https://some-picture.com" },
  { name: "Charity Henderson", avatarUrl: "https://some-picture.com" },
];

const App = () => (
  <List>
    {people.map(({ name, avatarUrl }, i) => (
      <ListItem
        id={`person-${i}`}
        key={i}
        leftAddon={<Avatar src={avatarUrl} alt={`${name}'s avatar'`} />}
        leftAddonType="avatar"
      >
        {name}
      </ListItem>
    ))}
  </List>
);

render(<App />, document.getElementById("root"));