GithubAvatarList

@component-controls/components

3.4.5

Avatar list that links to github profiles using rest api

Component

browse

docs

issues

import { GithubAvatarList } from '@component-controls/components';

Overview

browse

docs

issues

({ size, overlap }) => {
  return (
    <GithubAvatarList
      size={size}
      overlap={overlap}
      users={[
        { username: 'hasparus' },
        { username: 'lachlanjc' },
        { username: 'atanasster' },
      ]}
    />
  );
}

Controls

Name	Description	Default	Controls
overlap	overlap % of the avatars in a list number	0.4
size	size in pixels number	32

Properties

	Name	Description	Default
GithubAvatarListOwnProps (2 properties)

	users	list of github user names GithubAvatarUser[]	-
	maxItems	max number of avatars, then use a '...' number	7
GithubAvatarProps (5 properties)
HTMLAttributes (44 properties)
Attributes (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
- (1 properties)
BoxOwnProps (4 properties)
SpaceProps (28 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)

External dependencies

package	imports	peer
react ^17.0.1	useMemoFC	*
theme-ui ^0.6.0-alpha.7	jsxBoxPropsBox

Internal dependencies

file	imports
"../GithubAvatar"	GithubAvatarGithubAvatarProps

Component JSX

<GithubAvatar

keysizegithubAccessTokenusernameuseremailoverlapfixedSize

GithubAvatar

from"../GithubAvatar"

<div

div

Stories

Max Items

...

browse

docs

issues

() => {
  return (
    <GithubAvatarList
      maxItems={2}
      users={[
        { username: 'hasparus' },
        { username: 'lachlanjc' },
        { username: 'atanasster' },
      ]}
    />
  );
}

component-controls/GithubAvatar

component-controls/Header

Docs

GithubAvatarList

Component

Overview

Controls

Properties

External dependencies

Internal dependencies

Component JSX

Stories

Max Items