CODEWITHSUNDEEP
reactjsoffice-ui-fabric
YSA
YSA

Reputation: 879

How can I display a Persona component in a CommandBar in React Fabric-UI?

I am trying to display a Persona component on the far right of my CommandBar component, which I use as a header for my application.

Here's a code snippet

const getFarItems = () => {
  return [
    {
      key: 'profile',
      text: <Persona text="Kat Larrson" />,
      onClick: () => console.log('Sort')
    }
  ]
}


const FabricHeader: React.SFC<props> = () => {
  return (
    <div>
      <CommandBar
        items={getItems()}
        farItems={getFarItems()}
        ariaLabel={'Use left and right arrow keys to navigate between commands'}
      />
    </div>
  );
}

This throws a type error because the text prop expects a string and not a component. Any help would be appreciated!

Upvotes: 2

Views: 1717

Answers (1)

Mohamed Mansour
Mohamed Mansour

Reputation: 40169

Under the ICommandBarItemProps there is a property called commandBarButtonAs that the docs state:

Method to override the render of the individual command bar button. Note, is not used when rendered in overflow

And its default component is CommandBarButton which is basically a Button

Basically there are two ways to do this.

  1. Keep using Button, and apply your own renderer. Basically the IButtonProps you can add onRenderChildren which would allow you to add any Component such as Persona to render. This example would show you how it is done https://codepen.io/micahgodbolt/pen/qMoYQo
const farItems = [{
    // Set to null if you have submenus that want to hide the down arrow.
    onRenderMenuIcon: () => null, 
    // Any renderer
    onRenderChildren: () => ,
    key: 'persona',
    name: 'Persona',
    iconOnly: true,
}]
  1. Or add your own crazy component not dependent on CommandBarButton but that means you need to handle everything like focus, accessibility yourself. This example would show you how it is done https://codepen.io/mohamedhmansour/pen/GPNKwM
const farItems = [
  {
    key: 'persona',
    name: 'Persona',
    commandBarButtonAs: PersonaCommandBarComponent
  }
];

function PersonaCommandBarComponent() {
  return (
    
  );
}

Upvotes: 6

Related Questions