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