@getable/avatar

Component that displays an image within a bordered bounding box.

Usage no npm install needed!

<script type="module">
  import getableAvatar from 'https://cdn.skypack.dev/@getable/avatar';
</script>

README

Avatar NPM version Build Status Dependency Status

Component that displays an image within a bordered bounding box.

Table of Contents generated with DocToc

Usage

  import React from 'react'
  import Avatar from 'avatar'
  React.render(<Avatar image="http://myimage"/>, document.createElement('div'))
@import "avatar";

Props

<String> image Required

Path to an image.

<String> OR <Number> size Required

Defaults to "normal". One of "normal", "large", or a number of pixels for the width.

<String> alt Required

Required because it's good for accessibility and the spec says so. The alt attribute for the image.

<Function> onClick

Handler for a a click on the avatar. Defaults to nothing.

<Boolean> borderless

Defaults to false. If enabled, turns off the border. This might be useful if you just need an image constrained to a certain size.

<Object> or <String> srcSet

Sets srcset on the image. If a string, set this just like you would in normal HTML. If an object, the keys are the size and the values are the url

srcSet={{'1x': 'http://…', '2x': 'http://'}}

Tests

Tests are in tape.

  • npm test will run the tests in a browser.
  • npm run tdd will run the tests in a browser on every file change.

Developing

Install ribcage

npm i -g ribcage
ribcage preview .
# run with client side js enabled
ribcage preview . -s

Open http://localhost:4001/default

Releasing

To publish, run npm run release -- [{patch,minor,major}]

NOTE: you might need to sudo ln -s /usr/local/bin/node /usr/bin/node to ensure node is in your path for the git hooks to work

Requirements

  • npm > 2.0.0 So that passing args to a npm script will work. npm i -g npm
  • git > 1.8.3 So that git push --follow-tags will work. brew install git

License

Artistic 2.0 © Joey Baker