Avatar

Component that displays an image within a bordered bounding box.

Table of Contents generated with DocToc

• Usage
• Props
  • <String> image Required
  • <String> OR <Number> size Required
  • <String> alt Required
  • <Function> onClick
  • <Boolean> borderless
  • <Object> or <String> srcSet
• Tests
• Developing
  • Releasing
  • Requirements
• License

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