st-gravatar-img
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

npm version Build Status Dependency Status semantic-release Built With Stencil

A simple web component to display gravatar images based on stencil

Install this component

By cdn (cdn hosted)

<script src="https://unpkg.com/st-gravatar-img@latest/dist/st-gravatar-img.js"></script>

By npm (self hosted)

npm install st-gravatar-img --save
<script src="node_modules/st-gravatar-img/dist/st-gravatar-img.js"></script>

Use this component

<!-- by md5 hash of your email -->
<st-gravatar-img hash="322b70sg015ith31u69b49cc1c81315f"></st-gravatar-img>
<!-- or by email -->
<st-gravatar-img email="my@email.com"></st-gravatar-img>

Attributes

Attribute Type Default Description
hash string 322b70sg015ith31u69b49cc1c81315f MD5 hash of your email (avoid to expose your email)
email string my@email.com Gravatar account email (warning email will be exposed)
size number 120 Size (px) of the image

CSS Variables

CSS Variables can be used to style the web component:

Available variables

Attribute Default Description
--gravatar-img-border none Defines border property of the img element
--gravatar-img-border-radius none Defines border-radiues property of the img element
--gravatar-img-background none Defines background property of the img element

Example usage

st-gravatar-img {
  --gravatar-img-border: 10px solid #a52525;
  --gravatar-img-border-radius: 100%;
  --gravatar-img-background: #a52525;
}

How to create a hash

Images on Gravatar can be accessed by a MD5 hash of your email address.

How to use createHash method

This web component offers the possibility to create a hash based on your email address by the exposed createHash method.

let gravatarImg = document.querySelector('st-gravatar-img');

// method is available when component is ready
gravatarImg.componentOnReady().then(() => {
  // create hash
  const hash = gravatarImg.createHash('my@email.ccom');
  // now you can apply the hash on the web component
  gravatarImg.setAttribute('hash', hash);
});

Readme

Keywords

none

Package Sidebar

Install

npm i st-gravatar-img

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

197 kB

Total Files

32

Last publish

Collaborators

  • patrickvaler