2.2.0 • Published 2 years ago

@hig/avatar v2.2.0

Weekly downloads
61
License
Apache-2.0
Repository
github
Last release
2 years ago

Avatar

Avatars are a visual representation of a customer's identity. These may be small thumbnails as part of a menu or more prominent, standalone elements on account and management views.

Initials are dynamically generated from the provided name and always rendered. This allows the initials to serve as a placeholder while the image is loading.

Read more about when and how to use the Avatar component on the hig website.

Getting started

Install the package

yarn add @hig/avatar @hig/theme-context @hig/theme-data

Import the component

import Avatar, { sizes } from '@hig/avatar';

Basic usage

<Avatar
  name="David Gonzales"
  size={sizes.LARGE_48}
/>

Styling

Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Avatar also has a stylesheet prop that accepts a function wherein you can modify its styles. For instance

import Avatar from '@hig/avatar';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    avatarContainer: {
      ...styles.avatarContainer,
      color: themeData["colorScheme.status.error"]
    },
    avatarImageWrapper: {
      ...styles.avatarImageWrapper,
      opacity: 1
    },
    avatarImage: {
      ...styles.avatarImage,
      padding: `4px`
    },
    avatarInitials: {
      ...styles.avatarInitials,
      position: `static`
    }
  });

  return (
    <Avatar stylesheet={customStylesheet} />
  );
}
@hig/utilsprop-types
@infinitebrahmanuniverse/nolb-_hig@everything-registry/sub-chunk-395hig-react@zalastax/nolb-_hig@hig/avatar-bundle@hig/components
2.2.0

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

2.1.0

2 years ago

2.0.0

2 years ago

1.4.0

3 years ago

1.3.0

3 years ago

1.2.0

3 years ago

1.1.1

4 years ago

1.1.0

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

0.2.0

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

1.0.0

6 years ago

0.2.0-alpha.18da9628

6 years ago

0.2.0-alpha.08a74711

6 years ago

0.2.0-alpha.c84a6e41

6 years ago

0.2.0-alpha.921957c5

6 years ago

0.2.0-alpha.7a57fa8b

6 years ago

0.2.0-alpha.fbb1eed0

6 years ago

0.2.0-alpha.477bbd50

6 years ago

0.2.0-alpha.48865d3c

6 years ago

0.2.0-alpha.aedc366f

6 years ago

0.2.0-alpha.17713c8d

6 years ago

0.2.0-alpha.4ce2c078

6 years ago

0.2.0-alpha.09cf217c

6 years ago

0.2.0-alpha.66a8f744

6 years ago

0.2.0-alpha.82c749c4

6 years ago

0.2.0-alpha.48c93906

6 years ago

0.2.0-alpha.b1907560

6 years ago

0.2.0-alpha.1b7641c7

6 years ago

0.2.0-alpha.56f6a944

6 years ago

0.2.0-alpha.e610fd78

6 years ago

0.2.0-alpha.ee727b91

6 years ago

0.2.0-alpha.7d754caa

6 years ago

0.2.0-alpha.a59f6de7

6 years ago

0.2.0-alpha.616cd45d

6 years ago

0.2.0-alpha.6019ddd9

6 years ago

0.2.0-alpha.83e07673

6 years ago

0.2.0-alpha.056cb32e

6 years ago

0.2.0-alpha.81afec57

6 years ago

0.2.0-alpha.8ccba0ce

6 years ago

0.2.0-alpha.07dda526

6 years ago

0.2.0-alpha.24a8dfcc

6 years ago

0.2.0-alpha.d09c21e5

6 years ago

0.2.0-alpha.ece2f933

6 years ago

0.2.0-alpha.d4f39e69

6 years ago

0.2.0-alpha.0cfe988e

6 years ago

0.2.0-alpha.16905717

6 years ago

0.2.0-alpha.2c90eea6

6 years ago

0.2.0-alpha.ead80be1

6 years ago

0.1.1

6 years ago

0.2.0-alpha.2eb35b95

6 years ago

0.2.0-alpha.53829c48

6 years ago

0.2.0-alpha.51929e35

6 years ago

0.2.0-alpha.da8d993b

6 years ago

0.2.0-alpha.a7e48b6b

6 years ago

0.2.0-alpha.95e96891

6 years ago

0.2.0-alpha.142a1218

6 years ago

0.2.0-alpha.973a0872

6 years ago

0.2.0-alpha.8813910d

6 years ago

0.2.0-alpha.7eda8a42

6 years ago

0.2.0-alpha.91df7da2

6 years ago

0.1.0

6 years ago

0.2.0-alpha.7efcea38

6 years ago

0.2.0-alpha.b94224c6

6 years ago

0.1.0-alpha.aa9480ec

6 years ago

0.1.0-alpha.711c802c

6 years ago

0.1.0-alpha.9f5ebd81

6 years ago

0.1.0-alpha.a2391bda

6 years ago

0.1.0-alpha.d9fc498c

6 years ago

0.1.0-alpha.baeca6b5

6 years ago

0.1.0-alpha.f7f4402d

6 years ago

0.1.0-alpha.8656cb28

6 years ago

0.1.0-alpha.10c1414e

6 years ago

0.1.0-alpha.4a7e59d3

6 years ago

0.1.0-alpha.f372de37

6 years ago

0.1.0-alpha.69bb2e44

6 years ago

0.1.0-alpha.2edff3e6

6 years ago

0.1.0-alpha.b5deb0cb

6 years ago

0.1.0-alpha.de4da99d

6 years ago

0.1.0-alpha.04e0f0a0

6 years ago

0.1.0-alpha.348d1bd4

6 years ago

0.1.0-alpha.22828f03

6 years ago

0.1.0-alpha.d81fd7fa

6 years ago

0.1.0-alpha.908eccf3

6 years ago

0.1.0-alpha.235b923a

6 years ago

0.1.0-alpha.a529f134

6 years ago

0.1.0-alpha.fc17111c

6 years ago

0.1.0-alpha.22fae66d

6 years ago

0.1.0-alpha.08c3e651

6 years ago

0.1.0-alpha.1b33075a

6 years ago

0.1.0-alpha.256b7acb

6 years ago

0.1.0-alpha.7e067661

6 years ago

0.1.0-alpha.7c77b82f

6 years ago

0.1.0-alpha.18557704

6 years ago

0.1.0-alpha.e1b40010

6 years ago

0.1.0-alpha.d7d7ee5f

6 years ago

0.1.0-alpha.8dd688ca

6 years ago

0.1.0-alpha.4395edf0

6 years ago

0.1.0-alpha.0cdba2d5

6 years ago

0.1.0-alpha.6ba8ec1c

6 years ago

0.1.0-alpha.0c61e5c2

6 years ago

0.1.0-alpha.16f1fbdc

6 years ago

0.1.0-alpha.7a1c48cf

6 years ago

0.1.0-alpha.62ac882f

6 years ago

0.1.0-alpha.60d7230b

6 years ago

0.1.0-alpha.4cc6ad9e

6 years ago

0.1.0-alpha.220eff37

6 years ago

0.1.0-alpha.35b8a71d

6 years ago

0.1.0-alpha.974933cd

6 years ago

0.1.0-alpha.9fb41d04

6 years ago

0.1.0-alpha.7758d737

6 years ago

0.1.0-alpha.c2e500a7

6 years ago

0.1.0-alpha.0e6ea347

6 years ago

0.1.0-alpha.21135dbe

6 years ago

0.1.0-alpha.adf3bfb3

6 years ago

0.1.0-alpha.e9f6f0b1

6 years ago

0.1.0-alpha.011b51bc

6 years ago

0.1.0-alpha.955a974c

6 years ago

0.1.0-alpha.93754d28

6 years ago

0.1.0-alpha.d99ab10c

6 years ago

0.1.0-alpha.0106d6e0

6 years ago

0.1.0-alpha.81bd9138

6 years ago

0.1.0-alpha.6ee90932

6 years ago

0.1.0-alpha.66f8e803

6 years ago

0.1.0-alpha.994e0695

6 years ago

0.1.0-alpha.da753b8e

6 years ago

0.1.0-alpha.a36b4d24

6 years ago

0.1.0-alpha.4e42c3c5

6 years ago

0.1.0-alpha.618b44da

6 years ago

0.1.0-alpha.7048aa65

6 years ago

0.1.0-alpha.1bf93ec7

6 years ago

0.1.0-alpha.77ba8c5f

6 years ago

0.1.0-alpha.eaa5bffd

6 years ago

0.1.0-alpha.3a290a30

6 years ago

0.1.0-alpha.902ee5a9

6 years ago

0.1.0-alpha.6634b7d5

6 years ago

0.1.0-alpha.1427107d

6 years ago

0.1.0-alpha.52c6ed06

6 years ago

0.1.0-alpha.29696ead

6 years ago

0.1.0-alpha.639f7ea3

6 years ago

0.1.0-alpha.c3baa39c

6 years ago

0.1.0-alpha.5806825a

6 years ago

0.1.0-alpha.aa466cd9

6 years ago

0.1.0-alpha.56c77e3d

6 years ago

0.1.0-alpha.0867acc6

6 years ago

0.1.0-alpha.59de67eb

6 years ago

0.1.0-alpha.ef87b84f

6 years ago

0.1.0-alpha.ed550856

6 years ago

0.1.0-alpha.0e56d28c

6 years ago

0.1.0-alpha.2eb0476f

6 years ago

0.1.0-alpha.d990ea71

6 years ago

0.1.0-alpha.d4f33b40

6 years ago

0.1.0-alpha.f90430f7

6 years ago

0.1.0-alpha.b1ad6e17

6 years ago

0.1.0-alpha.47356923

6 years ago

0.1.0-alpha.2945e35d

6 years ago

0.1.0-alpha.b2c30c06

6 years ago

0.1.0-alpha.72e0baa7

6 years ago

0.1.0-alpha.8972daea

6 years ago

0.1.0-alpha.60ce5e77

6 years ago

0.1.0-alpha.f079a018

6 years ago

0.1.0-alpha.9a3f90b6

6 years ago

0.1.0-alpha.603d93b4

6 years ago

0.1.0-alpha.6a158d05

6 years ago

0.1.0-alpha.0f8b2e99

6 years ago

0.1.0-alpha.a18882be

6 years ago

0.1.0-alpha.a0b4aa8b

6 years ago

0.1.0-alpha.36557514

6 years ago

0.1.0-alpha.9f8120ff

6 years ago

0.1.0-alpha.1bfaa8c6

6 years ago

0.1.0-alpha.5628f583

6 years ago

0.1.0-alpha.450e377f

6 years ago

0.1.0-alpha.b0bb430a

6 years ago

0.1.0-alpha.10fbfde8

6 years ago

0.1.0-alpha.858daa28

6 years ago

0.1.0-alpha.2ea97460

6 years ago

0.1.0-alpha.26ea900f

6 years ago

0.1.0-alpha.9af96942

6 years ago

0.1.0-alpha.26ea0b86

6 years ago

0.1.0-alpha.640d189a

6 years ago

0.1.0-alpha.19d877a2

6 years ago

0.1.0-alpha.117a3084

6 years ago

0.1.0-alpha.bac6c2ff

6 years ago

0.1.0-alpha.44f98f2a

6 years ago

0.1.0-alpha.88fd5805

6 years ago

0.1.0-alpha.40ad6b99

6 years ago

0.1.0-alpha.79994acf

6 years ago

0.1.0-alpha.2271a036

6 years ago

0.1.0-alpha.3c1f3649

6 years ago

0.1.0-alpha.c49c89ba

6 years ago

0.1.0-alpha.3222035a

6 years ago

0.1.0-alpha.bb2a0ea5

6 years ago

0.1.0-alpha.46b594c5

6 years ago

0.1.0-alpha.ec9f9669

6 years ago

0.1.0-alpha.ed63e7c0

6 years ago

0.1.0-alpha.a3eec104

6 years ago

0.1.0-alpha.4f2cf98c

6 years ago

0.1.0-alpha.4bba140f

6 years ago

0.1.0-alpha.6cf5663a

6 years ago

0.1.0-alpha.d089bd7a

6 years ago

0.1.0-alpha.57ad3f84

6 years ago

0.1.0-alpha.75a89563

6 years ago

0.1.0-alpha.c4dcd454

6 years ago

0.1.0-alpha.38d10102

6 years ago

0.1.0-alpha.c178f134

6 years ago

0.1.0-alpha.4e1d8727

6 years ago

0.1.0-alpha.e55e531c

6 years ago

0.1.0-alpha.782961bd

6 years ago