Eigene Gravatar React Komponente

Zur Zeit arbeite ich wieder vermehrt an meinem Notiztool. Dort kann man sich dann mit einem Profil anmelden. Damit man dieses besser unterscheiden kann, soll auch ein Profilbild angezeigt werden.

In einer späteren Version soll man sein eigenes Bild wählen können. Bis dahin soll einfach ein Gravatar dargestellt werden.

Dein Gravatar ist ein Bild, das dich von Website zu Website begleitet. Es erscheint neben deinem Namen, wenn du Kommentare oder Beiträge in Blogs verfasst. Avatare helfen dabei, deine Beiträge in Blogs und Webforen zu identifizieren, warum also nicht auf jeder Website? Quelle

Leider habe ich dafür aber keine "fertige" React Komponente gefunden und durfte sie selber schreiben.

Das Grundgerüst

import React from 'react';

class Gravatar extends React.Component {

  render() {
    return <p>Gravatar</p>;
  }
}

export default Gravatar;

Bis jetzt wird durch diese Komponente nur "Gravatar" als Text angezeigt.

Gravatar URL erstellen

Die Gravatar URL stellt sich wie folgt zusammen:

• MD5 Hash der Mail
• Größe des Avatars
• zugelassenes Rating
• DefaultImage, welches geladen wird, wenn der Nutzer noch keinen Gravatar hat

Auf https://de.gravatar.com/site/implement/images/ kann man diese Spezifikationen nachschlagen. Der Code dazu sieht dann aber so aus:

loadGravatar = props => {
    const lowerCaseEmail = props.email.toLowerCase();
    const hash = md5(lowerCaseEmail);
    const size = props.size ? props.size : 200;
    const rating = props.rating ? props.rating : 'g';
    const alt = props.alt ? props.alt : 'Gravatar Image';
    const defaultImage = props.defaultImage ? props.defaultImage : 'retro';
    const url =
      'https://www.gravatar.com/avatar/' +
      hash +
      '?s=' +
      size +
      '&r=' +
      rating +
      '&d=' +
      defaultImage;
    console.info(url);
    this.setState({ url, alt });
};

Um einen md5 Hash zu bilden, wird eine Node Library verwendet. Sie nennt sich js-md5 und wird mit const md5 = require('js-md5'); eingebunden. Vorher muss diese Library aber erstmal geladen werden:

yarn add js-md5

Durch loadGravatar wird der State "url" und "alt" gesetzt. Beides wird für ein HTML Image gebraucht. Das heißt, das return im Render Bereich ändert sich dann auf:

render() {
    return <img src={this.state.url} alt={this.state.alt} />;
}

Komponenten Lebenszyklus

Nun muss die loadGravatar Funktion bei jeden Einbinden der Komponente geladen werden. Da hilft die Funktion componentWillMount. Außerdem sollten auch Änderungen berücksichtigt werden. Die Funktion componentWillReceiveProps ist dafür optimal.

componentWillMount() {
    this.loadGravatar(this.props);
}

componentWillReceiveProps(nextProps) {
    if (nextProps !== this.props) {
        this.loadGravatar(nextProps);
    }
}

Quellcode

Der komplette Quellcode für diese Gravatar Komponente sieht dann wie folgt aus:

import React from 'react';

const md5 = require('js-md5');

class Gravatar extends React.Component {
  state = {
    url: '',
    alt: '',
  };

  componentWillMount() {
    this.loadGravatar(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps !== this.props) {
      this.loadGravatar(nextProps);
    }
  }

  loadGravatar = props => {
    const lowerCaseEmail = props.email.toLowerCase();
    const hash = md5(lowerCaseEmail);
    const size = props.size ? props.size : 200;
    const rating = props.rating ? props.rating : 'g';
    const alt = props.alt ? props.alt : 'Gravatar Image';
    const defaultImage = props.defaultImage ? props.defaultImage : 'retro';
    const url =
      'https://www.gravatar.com/avatar/' +
      hash +
      '?s=' +
      size +
      '&r=' +
      rating +
      '&d=' +
      defaultImage;
    console.info(url);
    this.setState({ url, alt });
  };

  render() {
    return <img src={this.state.url} alt={this.state.alt} />;
  }
}

export default Gravatar;

Die Komponente kann dann überall anders integriert werden.

<Gravatar
    email={this.state.email}
    rating="g"
    size={24}
    defaultImage="retro"
    alt={'Gravatar of ' + this.state.email}
/>

Fertig ist die kleine feine Gravatar Komponente.