avatar-chip

React avatar-chip based on the Chip component of "material-ui" and "@multiavatar/multiavatar" package

---

import dependencies

import { Typography, Button, ButtonGroup, Container, Paper, Box, Avatar, Grid } from "@material-ui/core";
import { AvatarChip, AvatarLogo, } from "avatar-chip";

default avatar is based on personName if "src" is not provided,
default label is based on personName, if "label" is not provided

<AvatarChip
    size={["5.2rem", "3.9rem", "2.6rem", "1.8rem"]}  //avatar size array for different screen width 
    labelSize={["4rem", "3rem", "2rem", "1.5rem"]}   //label size array for different screen width 
    personName={"bob"}
    lift={6}
 />

just avatar, no label

<AvatarChip
    size={["4rem", "3rem", "2rem", "1.5rem"]} 
    personName={"mike"}
    onClick={function () { alert("hello mike") }}
    avatarProps={{ onClick: function (e) { e.stopPropagation(); alert("hi") } }}
    src="https://picsum.photos/200/300" 
    labelOn={false}
   
 />

just label, no avatar

<AvatarChip
    labelSize={["4rem", "3rem", "2rem", "1.5rem"]} 
    personName={"mike"}
    onClick={function () { alert("hello mike") }}
    avatarProps={{ onClick: function (e) { e.stopPropagation(); alert("hi") } }}
    src="https://picsum.photos/200/300" 
    logoOn={false}
   
 />

Avatar with hover tip

  <AvatarChip
    size={["1rem","2rem","3rem","4rem","5rem"]}  //avatarSize
    personName={"毛fdsdsdsdsdsd帅"}
    style={{backgroundColor:"skyblue",color:"blue"}}
    onClick={function () { alert("clicked") }}
    avatarProps={{ onClick: function (e) { e.stopPropagation(); alert("hi") } }}
    src="https://picsum.photos/200/300"
    label={
      <>
        <Typography variant="h5" style={{  }}>
          06355 马小帅
          </Typography>
        <Typography variant="h5" style={{ fontSize: "0.8rem", display: "block", color: "gray" }}>
          银行总行法律合规部
          </Typography>
      </>
    }
    hoverContent={
      <>
        <div style={{ display: "flex", justifyContent: "center" }}><AvatarLogo size={["2.8rem"]} personName={"毛fdsdsdsdsdsd帅"} /></div>
        <Typography variant="h5" style={{ fontSize: "1rem", }}>
        06355 马小帅
          </Typography>
        <Typography variant="h5" style={{ fontSize: "0.8rem", display: "block", color: "gray" }}>
          银行总行法律合规部
          </Typography>
      </>
    }
  />

---

Demo

https://vibrant-liskov-396f96.netlify.app/

GitHub https://github.com/cr7cr8/avatar-chip.git

git push -f origin master npm version patch npm publish