@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.9.0 (2021-07-18)

This release is focused around the FileInput component in the @react-md/form package and implementing a useFileUpload hook to handle uploading/previewing files in the browser. However, there is a notable change in this release for the form documentation since the demos have been split into the following pages:

• Text Field Demos
• Select Field Demos
• Selection Control Demos
• File Input Demos
• Slider Demos
• Validation Demos

Bug Fixes

• @react-md/form: FileInput correctly center the icon when children aren't provided (3a6ab33)
• @react-md/layout: useLayoutNavigation possible perf fix (3d65e4e)

Features

• @react-md/form: FileInput automatically swaps button type to text if children exist (e5585e1)
• @react-md/form: FormMessageCounter component added to public API (1508812)
• @react-md/form: Added a useFileUpload hook to upload files to the browser (efb3f2f), closes #1159
• @react-md/utils: added useDropzone hook (bc07a1f)

Other Internal Changes

• Added CodeQL Workflow for code analysis (9b4a279)
• @react-md/form: Added tests for useFileUpload (49ce4d9)
• @react-md/layout: Added additional test coverage (7c123ef)
• react-md.dev: Added an endpoint for uploading files that acts like a /dev/null (9663ae8)
• react-md.dev: Added examples for useFileUpload (8f9002e)
• react-md.dev: fix eslint error after updating prettier (75a9b0f)
• react-md.dev: Fixed rightAddon for Customizing Select Options Demo (367cc0d)
• react-md.dev: Split form demos into separate pages (8594930)
• react-md.dev: Use temporary layout on desktop in dev mode to get more screen space (53b20c4)