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 --save

Usage

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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT License