@getable/avatar
v1.2.1
Published
Component that displays an image within a bordered bounding box.
Downloads
5
Readme
Avatar
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