gravatar-wc

gravatar-wc uses the Gravatar image request API to display an image for the specified email address. This package uses Stencil to generate a web component that can be used by any front end library or framework.

Attributes

<!-- Empty component. Will use the default image. -->
<gravatar-wc></gravatar-wc>

<!-- Fully configured component. -->
<gravatar-wc
  email="first.last@mybusiness.com"
  default="identicon"
  force-default="true"
  protocol="https"
  rating="g"
  size="64"
>
</gravatar-wc>

name	type	options
email	string
default	string	404, blank, identicon, monsterid, mp, retro, robohash, wavatar
force-default	boolean
protocol	string	http, https
rating	string	g, pg, r, x
size	number

Integration

Stencil Integration Docs

JavaScript

<gravatar-wc email="demo@demo.com"></gravatar-wc>

<script src="https://unpkg.com/gravatar-wc/dist/gravatar-wc.js"></script>

React

// index.js, index.ts

import { defineCustomElements as defineGravatar } from "gravatar-wc/dist/loader";

defineGravatar(window);

// App.jsx, App.tsx

import { Component } from "react";

// skip if using JavaScript - only needed for TypeScript
declare global {
  namespace JSX {
    interface IntrinsicElements {
      "gravatar-wc": any;
    }
  }
}

export default class extends Component {
  render() {
    return <gravatar-wc email="demo@demo.com" />;
  }
}

Vue

// main.js, main.ts

import { defineCustomElements as defineGravatar } from "gravatar-wc/dist/loader";
import Vue from "vue";

defineGravatar(window);

Vue.config.ignoredElements = ["gravatar-wc"];

// ExampleComponent.vue

<template>
  <div>
    <gravatar-wc :email="email"></gravatar-wc>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class ExampleComponent extends Vue {
  email = "demo@demo.com";
}
</script>