@_nu/react-avatar
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.1 • Public • Published

    @_nu/react-avatar

    npm package npm downloads jsdelivr github
    npm package npm downloads jsdelivr github

    安装

    $ npm install @_nu/react-avatar

    二次封装

    /* @/components/Avatar/index.js */
    import React from 'react';
    import { Container, Img, Skeleton } from '@_nu/react-avatar';
    import 'sacss';
    import './index.css';
    
    const Avatar = ({
      className = '',
      src,
      size,
      placeholder,
      children = null,
    }) => {
      return (
        <Container size={size} className={className}>
          <Skeleton />
          <Img src={src} size={size} placeholder={placeholder} />
          {children}
        </Container>
      );
    };
    
    export default Avatar;

    使用

    import React from 'react';
    import Avatar from "./components/Avatar";
    import imgAvatar from '../avatar.jpg';
    
    const AvatarDefault = ({ className = null }) => (
      <svg
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
      >
        <path d="M512 64a448 448 0 1 0 448 448A448 448 0 0 0 512 64zm0 160a144 144 0 1 1-144 144 143.68 143.68 0 0 1 144-144zm256 573.44a381.76 381.76 0 0 1-512 0v-18.56A166.4 166.4 0 0 1 416 608h192a166.72 166.72 0 0 1 160 169.92v19.52z" />
      </svg>
    );
    
    const Page=()=>{
        return (
         <div>
          <Avatar alt="hello" size={24} src={imgAvatar} />
          <Avatar alt="hello" size={32} src={imgAvatar} />
          <Avatar alt="hello" size={40} src={imgAvatar} />
          <Avatar alt="hello" size={40} src="123" placeholder={AvatarDefault} />
          <Avatar alt="hello" src={imgAvatar} />
          <Avatar alt="hello" placeholder={AvatarDefault} />
        </div>
        );
    };
    
    export default Page;

    接口

    属性 类型 默认值 作用
    Component node i 容器组件
    children node - 子元素
    className string - class
    src string - 图片地址
    alt string.isRequired - 图片描述
    size string | number '40' Avatar 尺寸
    placeholder node | string - 图片加载失败
    • size:size={null} 表示头像会撑满整个容器
    • placeholder: string 表示图片加载失败用这个作为占位图,

    更多

    Install

    npm i @_nu/react-avatar

    DownloadsWeekly Downloads

    2

    Version

    0.5.1

    License

    MIT

    Unpacked Size

    67.5 kB

    Total Files

    37

    Last publish

    Collaborators

    • ziven27
    • nanasun