loading words...

Mar 13, 2019 14:03:57


by @swizecteller | 216 words | 🐣 | 116💌

Swizec Teller

Current day streak: 0🐣
Total posts: 116💌
Total words: 32303 (129 pages 📄)

Discovered a cool React library the other day: react-device-detect

Helps you do things differently for different devices. Works real good



There's a few ways you can use react-device-detect. The simplest is to import the `isBrowser` or `isMobile` flag.

You can use that to great effect in styled-components

const Foo = styled.div`

  width: ${isMobile ? 100 : 150}px;



If a lot of your rules depend on isMobile, you might want to use different components. Or section things.


When you have _a lot_ of differences between mobile and desktop, react-device-detect offers conditional components.

Anything inside `<MobileView>` only renders on mobile, for example.


_"But Swiz can't you just use media queries?"_

I'm glad you asked. Yes media queries work great in styled-components and most other styling approaches.

Unlike you, I don't know what the screen sizes are. I don't particularly want to either.


Usually I know what the UI should look like on a phone. Or a tablet. Or a SmartTV or Wearable. Okay TV and Wearable are rare but react-device-detect supports them.

What I don't know is how big those screens are.


Ultimately, are you building your app for a Mobile or for a mobile with exactly 375px screen width? If I go landscape I suddenly want the Desktop interface?

Heck no

👉 https://github.com/duskload/react-device-detect

Originally published at twitter.com

contact: email - twitter / Terms / Privacy