Easy to detect device from SharePoint SPFX React application

We have a SharePoint framework application need to behavior differently when invoked from mobile device. Here is the quick way to implement this.

1. Install react-device-detect package

npm install react-device-detect --save

2. Import the package

import {

  BrowserView,

  MobileView,

  isBrowser,

  isMobile

} from "react-device-detect";

3. Use it inside your application

  if(!isSubmitDisabled && !recordIsReadOnly && isMobile){

      submitMenuProps = {

        items: [

          {

            key: 'saveOnly',

            name:'Save only',

            secondaryText: 'Do not submit to approval workflow',

            text: 'Save as draft',

            title: 'Save without submitting to a workflow',

            iconProps: { iconName: 'Save'},

            onClick: this.props.onSaveOnly

          },                       

          {

            key: 'Submit',

            name:'Submit',

            secondaryText: 'Submit to approval workflow',

            text: 'Submit from Mobile',

            title: 'Submitting to a workflow',

            iconProps: { iconName: 'SaveToMobile'},

            onClick: this.props.onSubmit

          }                     

        ]

      };

    }