1.0.2 • Published 5 years ago
pravatar v1.0.2
Pravatar
Avatar Placeholder
For the moment we support following types:
- Any String
- Custom image
- Name initials
Install
npm install --save pravatar
# besides React, react-avatar also has prop-types as peer dependency,
# make sure to install it into your project
$ npm install prop-types --saveUsage
import React, { Component } from "react";
import Pravatar from "pravatar";
class Example extends Component {
render() {
return (
<Pravatar
text=""
image="https://avatars1.githubusercontent.com/u/17858766?s=88&v=4"
width="100px"
height="100px"
radius="100px"
fontSize="50px"
bg="#e7e7e7"
textColor="#000"
border="1px solid black"
position="center"
size="cover"
weight="bold"
/>
);
}
}Options
Avatar
| Attribute | Options | Default | Description |
|---|---|---|---|
text | string | empty | Any String |
image | string | empty | Image avatar to use |
textColor | string | inherit | set the color of text |
size | string | cover | set the background image size |
position | string | center | set the background image position |
weight | string | normal | set the font weight |
fontSize | string | inherit | set the font size |
border | string | none | set the border of the avatar |
radius | string | 100px | set the border radius of the avatar |
height | string | 50px | set the height of the avatar |
width | string | 50px | set the width of the avatar |
bg | string | inherit | To set the background color of the avatar |
initial | boolean | false | Will be used to generate avatar based on the initials of the person |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D