Add Avatar (user profile photo) to Semantic UI React's Dropdown

user_15209927 0
Viewed 1212

As a side project I wrote a little app, and for themes and layout I used React-Bootsrap. Right now I'm trying to learn Semantic UI React & I can't figure out how to add user profile photo to the dropdown (originally got the idea from Github's dropdown)

This is how it looks right now in my app using React Bootstrap

React Bootstrap code:

  <NavDropdown
      alignRight
      title={<StyledUserIMG src={user.photoURL} alt='userPhoto' />}
    >
      <NavDropdown.ItemText>
        Signed in as <b>{user.displayName}</b>
      </NavDropdown.ItemText>
      <NavDropdown.Item onClick={async () => await signOut()}>
        <b>Sign Out </b>
        <i className='fas fa-sign-out-alt'></i>
      </NavDropdown.Item>
    </NavDropdown>

Semantic UI code (what I have so far):

<Dropdown item>
  <Dropdown.Item>
    Signed in as <b>{user.displayName}</b>
  </Dropdown.Item>
  <Dropdown.Item onClick={async () => await signOut()}>
    <b>Sign Out </b> <i className='fas fa-sign-out-alt'></i>
  </Dropdown.Item>
</Dropdown>

Thank you in advance, wish y'all the best.

semantic-ui-react react-bootstrap reactjs javascript
3 Answers

This works on same principle as Alex Court suggested, just doesn't throw expected text error.

found it on:

https://react.semantic-ui.com/modules/dropdown/#usage-trigger

import React from 'react'
import { Dropdown, Image } from 'semantic-ui-react'

export const DropdownMenu = () => (

const trigger = <Image avatar src={user.photoURL} />;

const options = [
  {
    key: 'user',
    text: (
      <span>
         Signed in as <strong>{user.displayName}</strong>
      </span>
    ),
    disabled: true,
  },
  
    {
      key: 'settings',
      text: 'Settings',
      icon: 'setting',
    },
    {
      key: 'signOut',
      text: 'Sign Out',
      icon: 'sign out alternate',
    },
  ];
return (

  <Dropdown trigger={trigger} options={options} />
)
}
user_152099270 
import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const friendOptions = [
  {
    key: 'Jenny Hess',
    text: 'Jenny Hess',
    value: 'Jenny Hess',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/jenny.jpg' },
  },
  {
    key: 'Elliot Fu',
    text: 'Elliot Fu',
    value: 'Elliot Fu',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/elliot.jpg' },
  },
  {
    key: 'Stevie Feliciano',
    text: 'Stevie Feliciano',
    value: 'Stevie Feliciano',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/stevie.jpg' },
  },
  {
    key: 'Christian',
    text: 'Christian',
    value: 'Christian',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/christian.jpg' },
  },
]

const DropdownExampleInline = () => (
  <span>
    Show me posts by{' '}
    <Dropdown
      inline
      options={friendOptions}
      defaultValue={friendOptions[0].value}
    />
  </span>
)

export default DropdownExampleInline
user_120397610

You can pass a component to the Dropdown text prop.
Pass in the image as a component to the 'text' prop.

const DropdownExampleDropdown = () => (
  <Dropdown 
      text={<span><Image avatar src={'https://react.semantic-ui.com/logo.png'} /></span>}
      options={optionsList}
   />
)

export default DropdownExampleDropdown
user_56790790
Related