Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@uiw/react-avatar

Package Overview
Dependencies
Maintainers
1
Versions
172
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-avatar

Avatar component

  • 4.13.10
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
374
increased by29.41%
Maintainers
1
Weekly downloads
 
Created
Source

Avatar 头像

Open in unpkg NPM Downloads npm version

用来代表用户或事物,支持图片、图标或字符展示。

import { Avatar } from 'uiw';
// or
import Avatar from '@uiw/react-avatar';

基本用法

头像有四种尺寸,两种形状可选。

import ReactDOM from 'react-dom';
import { Avatar, Icon } from 'uiw';

ReactDOM.render(
  <div>
    <div style={{ paddingBottom: 20 }}>
      <Avatar size="large" icon={<Icon type="user"/>} />
      <Avatar icon="user" />
      <Avatar size="small" icon="user" />
      <Avatar size="mini" icon={<Icon type="user"/>} />
    </div>
    <div>
      <Avatar shape="square" size="large" icon="user" />
      <Avatar shape="square" icon="user" />
      <Avatar shape="square" size="small" icon="user" />
      <Avatar shape="square" size="mini" icon="user" />
    </div>
  </div>,
  _mount_
);

其它类型

支持三种类型:Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。

import ReactDOM from 'react-dom';
import { Avatar, Icon } from 'uiw';

ReactDOM.render(
  <div>
    <Avatar icon={<Icon type="user"/>} />
    <Avatar>U</Avatar>
    <Avatar src="https://avatars2.githubusercontent.com/u/1680273?s=40&v=4" />
    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
    <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
  </div>,
  _mount_
);

图片支持

在组件上使用onError事件,处理显示错误的图片。

import ReactDOM from 'react-dom';
import { Avatar, Icon } from 'uiw';

const App = () => {
  const [src, setSrc] = React.useState('https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4')
  return (
    <div>
      <Avatar
        src='https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4'
        onError={(e) => {
          if (e) {
            e.target.src = 'https://avatars2.githubusercontent.com/u/1680275?s=40&v=4'
          }
          return false;
        }}
      />
      <Avatar
        src={src}
        onError={(e) => {
          if (e) {
            setSrc('https://avatars2.githubusercontent.com/u/1680275?s=40&v=4');
          }
        }}
      />
    </div>
  )
}

ReactDOM.render(<App />, _mount_);

带徽标的头像

import ReactDOM from 'react-dom';
import { Avatar, Badge } from 'uiw';

ReactDOM.render(
  <div>
    <span style={{ marginRight: 24 }}>
      <Badge count={1}><Avatar shape="square" icon="user" /></Badge>
    </span>
    <span>
      <Badge dot><Avatar shape="square" icon="user" /></Badge>
    </span>
  </div>,
  _mount_
);

Props

参数说明类型默认值
icon设置头像的图标类型,参考 Icon 组件String、ReactNode-
shape指定头像的形状 square 正方形或者 circleEnum{'circle', 'square' }-
size设置头像的大小Enum{ 'large', 'small','mini', 'default' }default
src图片类头像的资源地址String-
alt规定图像的替代文本String-
onError图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为() => boolean-

Keywords

FAQs

Package last updated on 10 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc