パッケージの詳細

@react-md/avatar

mlaursen5.6kMIT5.1.6

This package is used to avatars which are used to symbolize people or objects.

react-md, material design, react, avatar

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"));

更新履歴

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.1.6 (2023-12-11)

Note: Version bump only for package @react-md/avatar

5.1.3 (2022-05-07)

Other Internal Changes

  • typos: fix additional typos throughout repo (ef20132)

5.1.2 (2022-04-02)

Note: Version bump only for package @react-md/avatar

5.1.0 (2022-03-18)

Other Internal Changes

  • run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

Note: Version bump only for package @react-md/avatar

4.0.3 (2021-12-31)

Other Internal Changes

  • Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

Note: Version bump only for package @react-md/avatar

4.0.0 (2021-11-24)

Features

  • Update to use new JSX Transform and latest eslint (8111cd3)

Other Internal Changes

  • always skip lib check (229cef1)
  • react-md: Remove prop-types package and usage (2637a6f)
  • stylelint: Updated to use stylelint (22d1598)

Breaking Changes

  • Minimum React version is now 16.14 instead of 16.8
  • react-md: There will no longer be run-time prop validation with the prop-types package.

3.1.0 (2021-09-10)

Other Internal Changes

  • ran yarn format to include new files (48d3d7f)

3.0.0 (2021-08-13)

Note: Version bump only for package @react-md/avatar

2.9.1 (2021-07-27)

Other Internal Changes

  • install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/avatar

2.8.4 (2021-06-10)

Note: Version bump only for package @react-md/avatar

2.8.3 (2021-05-18)

Documentation

  • react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/avatar

2.8.0 (2021-04-22)

Other Internal Changes

  • tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Note: Version bump only for package @react-md/avatar

2.7.0 (2021-02-28)

Documentation

  • tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
  • tsdoc: fixed some tsdoc annotations and styling (0449b86)
  • tsdoc: updated \@since annotations (c62027e)

Other Internal Changes

  • updated test coverage to not include conditional component PropTypes (24e5df1)

2.6.0 (2021-02-13)

Note: Version bump only for package @react-md/avatar

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/avatar

2.5.4 (2021-01-27)

Note: Version bump only for package @react-md/avatar

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/avatar

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/avatar

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/avatar

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/avatar

2.3.0 (2020-09-10)

Note: Version bump only for package @react-md/avatar

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/avatar

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/avatar

2.2.0 (2020-08-11)

Features

2.1.2 (2020-08-01)

Note: Version bump only for package @react-md/avatar

2.1.1 (2020-07-21)

Note: Version bump only for package @react-md/avatar

2.1.0 (2020-07-12)

Note: Version bump only for package @react-md/avatar

2.0.2 (2020-06-30)

Bug Fixes

  • LICENSE: Removed the time range from license since it was incorrect (50c9021)
  • Added sideEffects field to package.json (31820b9)
  • sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

The avatar component should be fairly similar to the v1 version except for a few behavior changes.

New Behavior and Features

  • the Avatar is now rendered as a <span> instead of a <div>
  • the ref is correctly forwarded to the <span> element
  • the children no longer needs to be wrapped in an additional <div> for styling
  • the alt tag will be defaulted to the empty string if the src tag is provided for convenience

Breaking Changes

  • no longer supports and icon prop since icons should just be rendered as the children for the Avatar
  • no longer supports the random and suffixes props since it did not work for SSR
  • the suffix prop was renamed to color
  • the iconSized prop was removed since the new CSS variable theming API should be used instead
  • the contentStyle and contentClassName props were removed since they are no longer required

New SCSS Variables, Functions, and Mixins

  • $rmd-avatar-colors - a map of all the colors to generate by default that have been updated to support minimal contrast ratio accessibility checks.
  • $rmd-avatar-font-size: 1.5rem !default - the font size to apply to avatars when displaying text
  • $rmd-avatar-line-height: rmd-typography-value(subtitle-1, line-height) !default - the line-height to apply to avatars when displaying text
  • @function rmd-avatar-theme - gets one of the theme values and validates that the theme name is valid
  • @function rmd-avatar-theme-var - gets one of the theme values as a css variable with a fallback value and validates that the theme name is valid
  • @mixin rmd-avatar-theme - applies one of the theme values to a css property as a css variable
  • @mixin rmd-avatar-theme-update-var - updates one of the theme values as a css variable

Renamed SCSS Variables, Functions, and Mixins

  • renamed $md-avatar-default-background to $rmd-avatar-background-color
  • renamed $md-avatar-default-color to $rmd-avatar-color
  • renamed $md-avatar-border-color to $rmd-avatar-border-color and changed the default value from null to rgba(if(rmd-theme-tone($rmd-theme-background) == light, $rmd-black-base, $rmd-white-base), 0.12)
  • renamed $md-avatar-size to $rmd-avatar-size and changed the default value from 40px to 2.5rem

Removed SCSS Variables Placeholders, and Mixins

  • $md-avatar-icon-sized was removed since it is no longer required
  • removed $md-avatar-include-suffixes and $md-avatar-colors since the colors are now handled by the $rmd-avatar-colors variable
  • removed react-md-theme-avatars and react-md-theme-vatar since they are no longer required
  • removed react-md-avatar-media since avatars no longer automatically updated based on media queries and instead are updated through CSS Variables