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="[email protected]"
  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="[email protected]"></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="[email protected]" />;
  }
}

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