Skip to main content

User initials or photo

Now we love to have users photos on circle or if photo not available then we we'd love to have their initials on the place photo should've stayed right!!.... English is killing the shit out of me 😄

All you have to do is import <UserPhoto /> now dont be fooled, there some props to be passed in

  • path => Path to the photo, in this case its image url
  • size => The size in int which will dictate the size of circle and font size as well
  • bgColor => default bg color is somewhat success green but you can override it with bgColor
  • color => default color is success green and again you can override with this
  • colorRaw => this is boolean if true then we're expecting color in green or red etc but if false or not provided then we're expecting color to be in bootstrap 5's text-success or bg-success-light
  • first_word => used to create first initial in case photo is not provided.
  • second_word => used to create second initial in case photo is not provided.

When photo is provided then component ignores words provided and show photo​

Actual example code​

<UserPhoto
  bgColor='bg-success-light'
  color='text-success'
  first_word='Andrew'
  second_word='Ndotela'
  path={cont?.contact_avatar}
  size={4}
  {/* colorRaw={true} */}
/>