Detecting Different Form Factors

[uditadhikari117]

Do we have some utility that can detect when the browser has be resized to a phone size? I have temporary solution that I can share on how I handle this but wanted to check with paste. Following are two different images that are displayed in different positions in JSX (not shown here) and with different sizes depending on the form factor of the browser (desktop or phone).

[gloriliale]

Hi @uditadhikari117! I'd like to know a little more about what you're asking. If the question is referring to a utility to sense browser size, then no, we do not have something like that specific to Paste. Is your question specifically about images? I noticed you're not using a responsive image, but wasn't sure if that was a part of your question. Let me know!

[gloriliale]

I also wanted to add: the #eng-guild-frontend channel would be a good place to talk with other devs about this kind of topic!

[uditadhikari117]

Hi @gloriliale ,
Thanks for looking into it. We are looking for a way to detect broswer width in mobile or desktop view. We do have a solution in a custom hook here :
https://github.com/twilio-internal/console/blob/GROW-3838/src/applications/AccountVerification/Hooks/useFormFactor.ts
We will later optimize this to work inside a provider. Happy to work with you guys if you want to absorb this and make it available for everyone.

[TheSisb]

Hi @uditadhikari117,

Thanks for sharing your hook, it's helpful to see! I just noticed we had built something similar for the Paste documentation website but didn't expose it publicly. We may consider making this part of our package. We appreciate your input!