react-simple-avatar

    1.2.0 • Public • Published

    <Avatar />

    npm version Build Status Coverage Status  PRs Welcome Plugins Welcome

    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.

    Table of Contents

    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

    License

    MIT © Shen Weizhong.

    Install

    npm i react-simple-avatar

    DownloadsWeekly Downloads

    9

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • avatar