Checking if extension editor is in mobile or desktop view

[ajaysinghrokt]

Hi there,

I have an extension that renders different layouts based on whether user is on mobile or desktop. This is done by checking the user's browser and not by media queries or the StyleHelper component. I am trying to replicate this behavior in the checkout editor but currently have no way of knowing if the user is displaying the mobile or desktop view.

Is there an API I can call to check this or, alternatively, is there a way for me to change layout based on screen width?

Thanks

[Liam]

Hi Ajaysinghrokt,

It's possible you could use the Layout utility, which is part of the admin-ui-extensions API and returns 'compact' on mobile devices and at narrow screen widths, and 'regular' otherwise. Would this work for you?

[ndt_ts]

Hi Liam,

But this library seems to be outdated and has got no releases since an year.

When i try to install this lib in my checkout extension, it gives me the error.

npm ERR! Could not resolve dependency:
npm ERR! peer react@">=17.0.0 <18.0.0" from @Shopify/admin-ui-extensions-react@1.1.0

Is there any other way latest solution to know if the extension is being shown in a mobile or desktop?