Have you ever built a control that you want to have behaving differently depending on whether you’re working on a mobile device or a desktop? For example, showing a callout when you’ve got a full resolution desktop screen available but using a screen covering panel on your mobile phone? Well, Fabric UI React continues to be a life saver and makes implementing this almost ridiculously easy with its ResponsiveMode utlility.

The first thing you need to do is import the necessary interfaces and classes;

import { IWithResponsiveModeState, ResponsiveMode, withResponsiveMode } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';

Next, create an extension for your control’s Props interface to also implement IWithResponsiveModeState

export interface INavigationCalloutInternalProps extends INavigationCalloutProps, IWithResponsiveModeState { }

Finally, add the ‘@withResponsiveMode’ decorator to your class and make sure that your control uses the extended Props interface;

@withResponsiveMode
export class NavigationCallout extends React.Component<INavigationCalloutInternalProps, INavigationCalloutState> {

Now we’re all set to make our control change its behavior based on screen size. In our render() function, we can now do the following:

const isSmall = this.props.responsiveMode! <= ResponsiveMode.medium;
{ isSmall ? (
      <Callout></Callout>
   ) : (
      <Panel></Panel>
   )
}