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="[e-mail]"
  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="[e-mail]"></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="[e-mail]" />;
  }
}

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 = "[e-mail]";
}
</script>