@react-md/avatar

@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 React from "react";
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"));

Changelog

2.3.0 (2020-09-10)

Bug Fixes

• @react-md/form: added missing scss variables (ec8d675)
• @react-md/states: fixed usedPressStates to pass onClick like other state hooks (82cd676)

Features

• a11y: improved LabelRequiredForA11y type definition (b7aa4fa)
• @react-md/alert: created and exported the default timeout and classnames (32bacc9)
• @react-md/button: added built-in support for rendering CircularProgress (c6c616b)
• @react-md/button: added support for disabled theme without disabling button (6a647e2)
• examples: added a simple umd example to show CDN usage (ed6b62e)
• @react-md/form: updated TextArea to use the new useResizeObserver API (2c2dd27)
• grid: added hook to access grid list size (a448816)
• grid: added new cloneStyles prop so grid styles can be applied to any child (ca913e7)
• @react-md/overlay: created and exported the default timeout and classnames (48cd9d5)
• @react-md/progress: added a small state to the CircularProgress (6884a3a)
• @react-md/tabs: updated tabs to use the new resize observer API (052b3f2)
• themes: updated sandboxes to use new CDN for pre-compiled themes (e83f47e)
• @react-md/tree: updated defaultTreeItemRenderer for class names (3c61f3c), closes #920
• @react-md/utils: added Dir component to help determine current writing direction (a929e04)
• @react-md/utils: added useGridList hook (56ecc19)
• @react-md/utils: added useIsomorphicLayoutEffect from react-redux (deacf1c)
• @react-md/utils: created a new useResizeObserver implementation (dc3f4df)
• @react-md/utils: more verbose useAppSize usage error message (2c81982)