react-gravatar

Version:

React component for rendering a gravatar profile image

3 lines • 13.7 kB

HTML

<!DOCTYPE html> <html lang="en"><head><title>React Gravatar</title><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=5.0"/><style id="gatsby-inlined-css"></style><link href="//fonts.googleapis.com/css?family=Raleway:800|Libre+Baskerville:400,400i,700" rel="stylesheet" type="text/css"/><style id="typography.js">html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;line-height:1.5em;box-sizing:border-box;overflow-y:scroll;}*{box-sizing:inherit;}*:before{box-sizing:inherit;}*:after{box-sizing:inherit;}body{color:hsla(0,0%,0%,0.8);font-family:Libre Baskerville,serif;font-weight:400;word-wrap:break-word;}img{max-width:100%;margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}h1{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;color:hsla(0,0%,0%,1);font-family:Raleway,sans-serif;font-weight:800;text-rendering:optimizeLegibility;font-size:2rem;line-height:2.25rem;}h2{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;color:hsla(0,0%,0%,1);font-family:Raleway,sans-serif;font-weight:800;text-rendering:optimizeLegibility;font-size:1.51572rem;line-height:2.25rem;}h3{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;color:hsla(0,0%,0%,1);font-family:Raleway,sans-serif;font-weight:800;text-rendering:optimizeLegibility;font-size:1.31951rem;line-height:2.25rem;}h4{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;color:hsla(0,0%,0%,1);font-family:Raleway,sans-serif;font-weight:800;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5rem;}h5{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;color:hsla(0,0%,0%,1);font-family:Raleway,sans-serif;font-weight:800;text-rendering:optimizeLegibility;font-size:0.87055rem;line-height:1.5rem;}h6{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;color:hsla(0,0%,0%,1);font-family:Raleway,sans-serif;font-weight:800;text-rendering:optimizeLegibility;font-size:0.81225rem;line-height:1.5rem;}hgroup{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}ul{margin-left:1.5rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;list-style-position:outside;list-style-image:none;}ol{margin-left:1.5rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;list-style-position:outside;list-style-image:none;}dl{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}dd{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}p{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}figure{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}pre{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;font-size:0.85rem;line-height:1.42;background:hsla(0,0%,0%,0.04);border-radius:3px;overflow:auto;padding:1rem;}table{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;font-size:1rem;line-height:1.5rem;border-collapse:collapse;width:100%;}fieldset{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}blockquote{margin-left:1rem;margin-right:1rem;margin-top:1rem;padding-bottom:0;padding-left:1rem;padding-right:0;padding-top:0;margin-bottom:1rem;color:hsla(0,0%,0%,0.7340000000000001);border-left:4px solid #999;}form{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}noscript{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}iframe{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}hr{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:calc(1rem - 1px);background:hsla(0,0%,0%,0.2);border:none;height:1px;}address{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1rem;}b{font-weight:700;}strong{font-weight:700;}dt{font-weight:700;}th{font-weight:700;}li{margin-bottom:calc(1rem / 2);}ol li{padding-left:0;}ul li{padding-left:0;}li > ol{margin-left:1.5rem;margin-bottom:calc(1rem / 2);margin-top:calc(1rem / 2);}li > ul{margin-left:1.5rem;margin-bottom:calc(1rem / 2);margin-top:calc(1rem / 2);}code{font-size:0.85rem;line-height:1.5rem;}kbd{font-size:0.85rem;line-height:1.5rem;}samp{font-size:0.85rem;line-height:1.5rem;}abbr{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;}acronym{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;}abbr[title]{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;text-decoration:none;}thead{text-align:left;}td,th{text-align:left;border-bottom:1px solid hsla(0,0%,0%,0.12);font-feature-settings:tnum;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:calc(0.75rem - 1px);}th:first-child,td:first-child{padding-left:0;}th:last-child,td:last-child{padding-right:0;}tt,code{background-color:hsla(0,0%,0%,0.04);border-radius:3px;font-family:Consolas,"Roboto Mono","Liberation Mono",Menlo,Courier,monospace;padding:0;padding-top:0.2em;padding-bottom:0.2em;}pre code{background:none;line-height:1.42;}code:before,code:after,tt:before,tt:after{letter-spacing:-0.2em;content:" ";}pre code:before,pre code:after,pre tt:before,pre tt:after{content:"";}@media only screen and (max-width:480px){html{font-size:80%;line-height:1.5em;}}a{font-weight:bold;color:#00f;text-decoration:none;}a:hover{text-decoration:underline;}</style></head><body><div id="react-mount"><div style="max-width:960px;margin-left:auto;margin-right:auto;margin-bottom:1.5rem;padding:1.5rem 0.75rem;padding-top:3rem;" data-reactroot="" data-reactid="1" data-react-checksum="-1468530803"><div data-reactid="2"><h1 data-reactid="3">React Gravatar</h1><p data-reactid="4"><a href="https://github.com/KyleAMathews/react-gravatar" data-reactid="5">Code on Github</a></p><p data-reactid="6">React component for rendering a gravatar profile image. Adjusts automatically for retina displays.</p><h2 data-reactid="7">Install</h2><code data-reactid="8">npm install --save react-gravatar</code><br data-reactid="9"/><br data-reactid="10"/><h2 data-reactid="11">Usage</h2><pre data-reactid="12"><code data-reactid="13">import Gravatar from 'react-gravatar' <Gravatar email="a-email@example.com" /></code></pre><h2 data-reactid="14">A few examples</h2><code style="display:block;margin-bottom:0.75rem;" data-reactid="15"><Gravatar email="mathews.kyle@gmail.com" /></code><img alt="Gravatar for mathews.kyle@gmail.com" src="//www.gravatar.com/avatar/e567aa8adbd2d49cd9990ea1ed19d4eb?d=retro&r=g&s=50" srcset="//www.gravatar.com/avatar/e567aa8adbd2d49cd9990ea1ed19d4eb?d=retro&r=g&s=100 2x" height="50" width="50" class="react-gravatar" data-reactid="16"/><code style="display:block;margin-bottom:0.75rem;" data-reactid="17"><Gravatar email="mathews.kyle@gmail.com" size={150} /></code><img alt="Gravatar for mathews.kyle@gmail.com" src="//www.gravatar.com/avatar/e567aa8adbd2d49cd9990ea1ed19d4eb?d=retro&r=g&s=150" srcset="//www.gravatar.com/avatar/e567aa8adbd2d49cd9990ea1ed19d4eb?d=retro&r=g&s=300 2x" height="150" width="150" class="react-gravatar" data-reactid="18"/><p data-reactid="19">For emails without a gravatar, use the retro default. You can override this by passing in a different 'default' prop. See https://en.gravatar.com/site/implement/images/ for options.</p><code style="display:block;margin-bottom:0.75rem;" data-reactid="20"><Gravatar email="blah@blah.com" /></code><img alt="Gravatar for blah@blah.com" src="//www.gravatar.com/avatar/c59152a77c0bc073fe6f2a3141b99010?d=retro&r=g&s=50" srcset="//www.gravatar.com/avatar/c59152a77c0bc073fe6f2a3141b99010?d=retro&r=g&s=100 2x" height="50" width="50" class="react-gravatar" data-reactid="21"/><h4 data-reactid="22">Override all defaults</h4><code style="display:block;margin-bottom:0.75rem;" data-reactid="23"><Gravatar email="blahblah@blah.com" size={150} rating="pg" default="monsterid" className="CustomAvatar-image" /></code><img alt="Gravatar for blahblah@blah.com" src="//www.gravatar.com/avatar/87d30edb4183a4c3c371e349316020d8?d=monsterid&r=pg&s=150" srcset="//www.gravatar.com/avatar/87d30edb4183a4c3c371e349316020d8?d=monsterid&r=pg&s=300 2x" height="150" width="150" class="react-gravatar CustomAvatar-image" data-reactid="24"/><h2 data-reactid="25">Props</h2><ul data-reactid="26"><li data-reactid="27"><code data-reactid="28">email: React.PropTypes.string</code> — email address to generate Gravatar image for.</li><li data-reactid="30"><code data-reactid="31">md5: React.PropTypes.string</code> — Optionally just pass in a precomputed md5 hash instead of an email.</li><li data-reactid="33"><code data-reactid="34">size: React.PropTypes.number</code> — Size in pixels of image to generate. Images are always square. Defaults to 50</li><li data-reactid="36"><code data-reactid="37">rating: React.PropTypes.string</code> — rating to use. Defaults to 'g'</li><li data-reactid="39"><code data-reactid="40">default: React.PropTypes.string</code> — Pick the type of fallback image to use. Defaults to 'retro'</li><li data-reactid="42"><code data-reactid="43">className: React.PropTypes.string</code> — Add a className to the generated image.</li><li data-reactid="45"><code data-reactid="46">style: React.PropTypes.object</code> — Set styles on the image.</li><li data-reactid="48"><code data-reactid="49">protocol: React.PropTypes.string</code> — Use different protocol (http://, https://, etc.) Defaults to '//'</li></ul></div><span style="display:block;clear:both;" data-reactid="51"> </span></div></div><div><script src="/react-gravatar/commons-28d39773ef6dfe761243.js"></script><script src="/react-gravatar/app-57ca548758fe56563274.js"></script><script src="/react-gravatar/path---index-485cadfdf72f0ad49aba.js"></script><script src="/react-gravatar/page-component---pages-index-js-98e08e064da49b8c1c52.js"></script></div></body></html>