react-awesome-gravatar

react-awesome-gravatar

Installation

npm install react-awesome-gravatar --save
yarn add react-awesome-gravatar

Usage

Gravatar component

import Gravatar from 'react-awesome-gravatar';

<Gravatar email={email}>
  { url => (<img src={url} />) }
</Gravatar>
// Should generate an <img /> tag with the correct gravatar profile url: https://www.gravatar.com/avatar/23463b99b62a72f26ed677cc556c44e8
import { GravatarOptions } from 'react-awesome-gravatar';
const options: GravatarOptions = {
    size: 50,
}; // check below for all available options
<Gravatar email="[e-mail]" options={ options }>
  { url => (<img src={url} />) }
</Gravatar>
// Should generate an <img /> tag with the correct gravatar profile url: https://www.gravatar.com/avatar/23463b99b62a72f26ed677cc556c44e8?size=50

Just the function

If you just need the URL to the profile image of gravatar, you can omit the use of the component and call the function that the component calls directly.

import { getGravatarUrl } from 'react-awesome-gravatar';

const profileUrl = getGravatarUrl('[e-mail]');
// profileUrl has the profile url: https://www.gravatar.com/avatar/23463b99b62a72f26ed677cc556c44e8

import { getGravatarUrl, GravatarOptions } from 'react-awesome-gravatar';
const options: GravatarOptions = {
    size: 50,
}; // check below for all available options

const profileUrl = getGravatarUrl('[e-mail]', options);
//  profileUrl has the profile url: https://www.gravatar.com/avatar/23463b99b62a72f26ed677cc556c44e8?size=50

Options

interface GravatarOptions {
  size?: number;
  default?: '404'|'mp'|'identicon'|'monsterid'|'wavatar'|'retro'|'robohash'|'blank';
  defaultUrl?: string;
  forcedefault?: 'y';
  rating?: 'g'|'pg'|'r'|'x';
}

The options match 1:1 to the Gravatar API except for defaultUrl which if present set the Gravatar default to it.

const options: GravatarOptions = {
    defaultUrl: 'http://example.com/image.png',
}
const profileUrl = getGravatarUrl('[e-mail]', options);
//  profileUrl has the profile url: https://www.gravatar.com/avatar/23463b99b62a72f26ed677cc556c44e8?default=http://example.com/image.png

Tests

Tests are configured with Jest, to run them use:

npm run test