How to use the is-mobile function in is-mobile

import { detect } from 'detect-browser'
import detectMobile from 'is-mobile'

/**
 * Application Constants
 * @ignore
 */

export const isElectron = navigator.userAgent.indexOf( 'Electron' ) > -1
export const isDev = process.env.NODE_ENV !== 'production'

export const browser = detect()
export const isMac = browser.os === 'Mac OS'
export const isMobile = detectMobile()
export const isTablet = detectMobile( { tablet: true } )
export const isDesktop = !( isMobile || isTablet )

// The user is considered idle after 3 seconds
export const IDLE_TIMEOUT = 1000 * 3

/* Backend Info */
// eslint-disable-next-line no-undef
export const BACKEND_HOST = window.location.hostname || 'localhost'
export const BACKEND_PORT = !isDev ? 1699 : 42425
export const BACKEND_URL = `http://${BACKEND_HOST}:${BACKEND_PORT}`
export const WS_URL = `ws://${BACKEND_HOST}:${BACKEND_PORT}`

/* Sentry Data Source Name */
export const SENTRY_DSN = 'https://51b714c1e7544cba86efb2cad85152ff@sentry.io/1363390'
export const SENTRY_PROJECT = 'desktop-frontend'

constructor(props) {
    super()

    this.state = {
      filters: props.filters,
      totalStaked: 0,
      inApplication: 0,
      inCommit: 0,
      inReveal: 0,
      inRegistry: 0,
      withdrawn: 0,
      rejected: 0,
      fetching: false,
      showFilters: !isMobile(),
      toggle: true
    }

    this.onSearchInput = this.onSearchInput.bind(this)
    this.onFilterChange = this.onFilterChange.bind(this)
    this.onFiltersChange = props.onFiltersChange.bind(this)
    this.resetFilters = this.resetFilters.bind(this)

    // this.fetchStats()
  }

async function init() {

  let hasAcceptedMobile
  try {
    hasAcceptedMobile = store.get('hasAcceptedMobile')
  } catch (error) {
    console.log(error)
  }
  if (isMobile() && !hasAcceptedMobile && !window.web3) {
    ReactDOM.render(, document.getElementById('root'))
    return
  }

  try {
    await Promise.all([
      getPermissions(),
      registry.init(),
      plcr.init(),
      parameterizer.init(),
      token.init()
    ])

  } catch (error) {
    console.error(error)
  }

export default props => {
  if (!isMobile(navigator.userAgent)) {
    ReactDOM.render(
      
        
      ,
      node,
    );
  }
};

const update = () => {
  const { filenameSelector, iconSelector, host } = getSelector(
    window.location.hostname
  );
  const isMobile = mobile();
  const isGitHub = host === 'github';

  const filenameDoms = select.all(filenameSelector);
  const iconDoms = select.all(iconSelector);

  const filenameDomsLength = filenameDoms.length;

  for (let i = 0; i < filenameDomsLength; i += 1) {
    const filename =
      isGitHub && isMobile
        ? getGitHubMobileFilename(filenameDoms[i])
        : filenameDoms[i].innerText.trim();

    const iconDom = isGitHub
      ? iconDoms[i].querySelector('.octicon')
      : iconDoms[i];

import Download from 'react-icons/lib/fa/cloud-download'
import LoadIcon from 'react-icons/lib/fa/spinner'
import LoopIcon from 'react-icons/lib/md/repeat-one'
import RepeatIcon from 'react-icons/lib/md/repeat'
import ShufflePlayIcon from 'react-icons/lib/ti/arrow-shuffle'
import OrderPlayIcon from 'react-icons/lib/md/view-headline'
import PlayLists from 'react-icons/lib/md/queue-music'
import NextAudioIcon from 'react-icons/lib/md/skip-next'
import PrevAudioIcon from 'react-icons/lib/md/skip-previous'
import CloseBtn from 'react-icons/lib/md/close'
import DeleteIcon from 'react-icons/lib/fa/trash-o'

import 'rc-slider/assets/index.css'
import 'rc-switch/assets/index.css'

const IS_MOBILE = isMobile()

export const AnimatePlayIcon = () => (
  
)
export const AnimatePauseIcon = () => (
  
)

export const Load = () => (
  <span>
    
  </span>
)

export const PlayModel = ({ visible, value }) =&gt; (

<span>PRE-APPROVE TOKENS FOR VOTING</span>
                <div>
                  <div>
                    
                    
                    
                  </div>
                </div>
              
            
          
        
        {
          registryGuideSrc
            ? null
            : doNotDisplay || isMobile()
              ? null
              : 
                
              
        }
      
    )
  }

getColumns() {
    if (isMobile()) {
      return this.mobileColumns()
    }
    try {
      const columns = [{
        Header: 'Domain',
        accessor: 'domain',
        Cell: (props) => {
          const domain = props.value
          const url = `https://www.google.com/s2/favicons?domain=${domain}`
          return (
            <span title="View profile"> {
                event.preventDefault();
                history.push(`/domains/${props.value}`)</span>

constructor (props) {
    super()
    this.state = {
      activeIndex: 0,
      accordionArrow: false,
      helpClicked: false,
      socialClicked: false,
      showMenu: true,
      mobile: isMobile()
    }
    this._Link = props.Link
    this._history = props.history
    this.handleClick = this.handleClick.bind(this)
    this.updateRoute = this.updateRoute.bind(this)
    this.collapse = this.toggleMenu.bind(this)
    this.pushHistory = this.pushHistory.bind(this)
  }

render() {
    const { mapId, options } = this.props;
    const { title } = this.state;
    
    const webMapId = this.getUrlParameter('webmap');

    const modules = webMapId
      ? [
          'esri/Map',
          'esri/views/MapView',
          'esri/WebMap',
        ]
      : [
          'esri/Map',
          isWebGLEnabled() && !isMobile() ? 'esri/views/SceneView' : 'esri/views/MapView',          
          'esri/layers/MapImageLayer',
          'esri/layers/FeatureLayer',
        ];

    return (
      
        {this.props.legend ?  : null}
      
    );
  }
}