0.0.2 • Published 6 years ago
gravatar-wc v0.0.2
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 |
---|---|---|
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
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>