RemoteImageGroup

@coinbase/cds-web@8.13.6

A component to display a group of RemoteImage components in a stack.

Import

import { RemoteImageGroup } from '@coinbase/cds-web/media/RemoteImageGroup'

SourceView source codeStorybookView Storybook

---

Related components

• RemoteImage

Basic Usage

Loading...

󰙡

Live Code

<RemoteImageGroup>
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.dai.imageUrl} />
  <RemoteImage source={assets.hbar.imageUrl} />
  <RemoteImage source={assets.ltc.imageUrl} />
  <RemoteImage source={assets.uni.imageUrl} />
</RemoteImageGroup>

Max Items

Loading...

󰙡

Live Code

<RemoteImageGroup max={4} size={32}>
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.btc.imageUrl} />
  <RemoteImage source={assets.dai.imageUrl} />
  <RemoteImage source={assets.hbar.imageUrl} />
  <RemoteImage source={assets.ltc.imageUrl} />
  <RemoteImage source={assets.uni.imageUrl} />
</RemoteImageGroup>

Different Shapes

Loading...

󰙡

Live Code

<RemoteImageGroup shape="circle" size="xxl">
  <RemoteImage shape="squircle" source={squareAssets.human1} />
  <RemoteImage source={assets.sushi.imageUrl} />
  <RemoteImage shape="squircle" source={squareAssets.human2} />
  <RemoteImage source={assets.ltc.imageUrl} />
</RemoteImageGroup>

Different Sizes

Use the size prop to change the dimensions of the avatars in the group.

Loading...

󰙡

Live Code

function Component() {
  const [size, setSize] = React.useState('m');
  const avatarSizes = ['s', 'm', 'l', 'xl', 'xxl', 'xxxl', 16, 24, 32];
  const options = avatarSizes.map((s) => <SelectOption key={s} title={s} value={s} />);

  return (
    <VStack gap={2}>
      <Select width={240} labelVariant="inside" label="Image Size" value={size} onChange={setSize}>
        {options}
      </Select>
      <RemoteImageGroup size={size}>
        <RemoteImage source={assets.eth.imageUrl} />
        <RemoteImage source={assets.btc.imageUrl} />
        <RemoteImage source={assets.dai.imageUrl} />
        <RemoteImage source={assets.hbar.imageUrl} />
      </RemoteImageGroup>
    </>
  );
}