React-simple-avatar NPM

`<Avatar />`

A simple & flexible component for showing avatar. Baes on react-router-dom.

react-simple-avatar can be easily & highly customized. It just ensure the minimum but the most efficient code. You can use plugins or write your own avatar layer component to extend it. It's suitable for react, react-router and react redux projects.

Install

yarn add react-simple-avatar

Usage

react-simple-avatar was built with classnames, radium.

ES6 and CommonJS builds are available with each distribution. For example:

import React from 'react';
import ReactDOM from 'react-dom';
import { RouterAvatar, LinkAvatar, Initials, Src } from 'react-simple-avatar';

ReactDOM.render(
  <RouterAvatar
   to='#'
   alt='沈维忠'
   size={ 58 }
   style={ {color: '#000'} }
   className='foundation-avatar round-box-5px border-2px'>
    <Initials
     text='沈'
     size={ 30 }
     style={ {color: '#f00'} }
     className='foundation-avatar-initials' />
    <Src
     from='http://placehold.it/58x58'
     style={ {display: 'inline-block'} }
     className='foundation-avatar-src' />
    /*
      or, you can put your own avatar plugin here.
      Maybe it's a layer to show user permissions;
      a loader for avatar; the avatar fetched from
      twitter; an hover effect layer... Who knows
      what else ~
      ...
    */
  </RouterAvatar>,
  document.getElementById('root')
);

Or,

var React        = require('react');
var ReactDOM     = require('react-dom');
var SimpleAvatar = require('react-simple-avatar');

ReactDOM.render(
  <SimpleAvatar.LinkAvatar
   to='#'
   alt='沈维忠'
   size={ 58 }
   style={ {color: '#000'} }
   className='foundation-avatar round-box-5px border-2px'>
    <SimpleAvatar.Initials
     text='沈'
     size={ 30 }
     style={ {color: '#f00'} }
     className='foundation-avatar-initials' />
    <SimpleAvatar.Src
     from='http://placehold.it/58x58'
     style={ {display: 'inline-block'} }
     className='foundation-avatar-src' />
    /*
      or, you can put your own avatar plugin here.
      Maybe it's a layer to show user permissions;
      a loader for avatar; the avatar fetched from
      twitter; an hover effect layer... Who knows
      what else ~
      ...
    */
  </SimpleAvatar.LinkAvatar>,
  document.getElementById('root')
);

Contribute ·

Use GitHub issues for requests.

See the contribute files!

PRs accepted.

Plugin

Plugins accepted.

Alternative

If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.

Some of the more popular and actively maintained ones are:

Todo

make it can receive micro data (in the discussion...)
make it can receive dataset (in the discussion...)
make it more accessible for everyone
add doc for introducing accessibility
add doc like react-canvas for introducing each (high-order) component
add doc for introducing how to build
add doc for introducing how to preview the given example in the local
add doc for introducing the inspiration(or motivation) for creating this component
add doc for introducing how to develop plugin for react-simple-avatar
tell the advantages
provide schematic
provide roadmap
provide release notes
provide changelog
provide online preview
show the conventions that project followed
provide help center(or recipes...)
add supported browsers
provide umd build
add Thanks section for some help from articles & developers(like node-config did)
optimize docs