flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

Avatar should render dummy svg when provided with render function

Open mkbctrl opened this issue 1 year ago • 0 comments

  • [x] I have searched the Issues to see if this bug has already been reported
  • [x] I have tested the latest version

Summary

When overwriting the component with custom image component, the dummy svg should still render if we are facing a scenario where the image url may be undefined. Right now I have to workaround it like this:

<Avatar
        img={(avatarProps) => {
          if (imagePreviewUrl) {
            return (
              <Image
                alt={t('alt')}
                referrerPolicy='no-referrer'
                src={imagePreviewUrl}
                width={144}
                height={144}
                {...avatarProps}
              />
            )
          }

          // Flowbite avatar is unable to render dummy when props are passed
          return <Avatar {...avatarProps} size='xl' bordered={false} />
        }}
        size='xl'
        alt={t('alt')}
        className='flex-shrink-0'
        rounded
      />

Context

I want the ability to render custom component, and to maintain the ability to render the dummy, if component is null

mkbctrl avatar Apr 28 '24 09:04 mkbctrl