Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@uiw/react-avatar
Advanced tools
用来代表用户或事物,支持图片、图标或字符展示。
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_
);
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
icon | 设置头像的图标类型,参考 Icon 组件 | String、ReactNode | - |
shape | 指定头像的形状 square 正方形或者 circle 圆 | Enum{'circle ', 'square ' } | - |
size | 设置头像的大小 | Enum{ 'large ', 'small ','mini ', 'default ' } | default |
src | 图片类头像的资源地址 | String | - |
alt | 规定图像的替代文本 | String | - |
onError | 图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |
FAQs
Avatar component
The npm package @uiw/react-avatar receives a total of 180 weekly downloads. As such, @uiw/react-avatar popularity was classified as not popular.
We found that @uiw/react-avatar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.