themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

Avatar should render dummy svg when provided with render function #1381

Open mkbctrl opened 2 months ago

mkbctrl commented 2 months ago

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