react-robust-avatar
v1.0.2
Published
React component for load user avatar safely.
Downloads
3
Readme
react-robust-avatar
React 版本的安全头像组件。设置当前头像和默认头像,在头像加载失败的时候将会加载默认头像。 (兼容IE8,基于[email protected])
Install
$ npm i --save react-robust-avatar
Example
$ parcel ./src/index.html
Usage
// base usage.
import React from 'react';
import ReactDOM from 'react-dom';
// running with ES5 (Default)
import {Avatar} from 'react-robust-avatar';
// import {Avatar} from 'react-robust-avatar/lib/es5';
// running on ES3(IE8+)
// import {Avatar} from 'react-robust-avatar/lib/es3';
// running on ES6
// import {Avatar} from 'react-robust-avatar/lib/es6';
const Card extends React.Component {
render() {
return (
<div>
<Avatar
src="http://hifizz.com/content/images/2017/11/WechatIMG444.jpeg"
defaultSrc="http://hifizz.com/content/images/2017/11/WechatIMG4.jpeg"
size="50px"
shape="circle"
/>
</div>
)
}
}
ReactDOM.render(<Card />, document.getElementById('app'));
// HOC for series avatar usage
import Avatar from "react-robust-avatar";
const types = {
"SuperMan": 'http://xxx.com/image/SuperMan.jpg',
"Batman": 'http://xxx.com/image/Batman.jpg',
"Spider-Man": 'http://xxx.com/image/Spider-Man.jpg',
"Thor": 'http://xxx.com/image/Thor.jpg',
"Hal Jordan": 'http://xxx.com/image/Hal-Jordan.jpg',
"Wonder Woman": 'http://xxx.com/image/Wonder Woman.jpg',
};
const HeroAvatar = props => {
const size = "40px";
const src = types[props.type];
const defaultSrc = "http://hifizz.com/image/default.jpg";
return <Avatar size={size} src={src} defaultSrc={defaultSrc} />;
};
export default HeroAvatar;
Props
interface AvatarProps {
size: string | number; // width value, width === height
src: string; // url
defaultSrc: string; // url
shape?: string; // 'circle' | 'square'
alt?: string;
title?: string;
style?: object;
className?: string;
onClick?: Function;
}
TODO
- lazy load avatar.
- CI
- Test
- Git hook