Styled-Components & Super-Query: Responsiveness and Device control made easy

Marcos Gonçalves
Sep 7, 2018 · 3 min read

We all know that Media Query is a very important part of the web application, with that we can set any kind of responsiveness and device control.

Most of the developers only use simple media feature as part of the media query syntax, and for that simple use case, there’s a bunch of good approach for your styled-component based application.

Media Feature examples: width | min-width | max-width | height | min-height | max-height

But how about control over the screen orientation, aspect-ratio, resolution and tv devices? Or even have a interpolation between?

That’s where SuperQuery comes in!

SuperQuery is a media-query for styled-component, intuitive and easy of use, that provides you a full powerful and simple control over your media query.

Wanna a demonstration?

How about create a media query that handles screen widths between 360px and 1024px ?

Cool, right? But it’s even cooler to use our built-in breakpoints, let's rewrite it!

Of even how about control the screen orientation over mobile devices ?

And also you can create complex query!

Awesome right?! So let’s go to the implementation.


#1 Installation

For YARN users:

For NPM users:

Note that it should not be in the devDependencies.

#2 How to use

First we need to import the package into our component;

Then, we are ready to mix it with styled-component:

#3 API Documentation

SuperQuery follows the css3 media query rule, and if you are already aware of its syntax, the only thing you need to do is to declare it as a function written in lower camel case.

Example:

We need to follow the base syntax bellow:

SuperQuery().<expression>()

Then, we would end-up with the following implementation, as seen in the code demos above:

The Media Query Syntax

Media queries are case insensitive, and will not work if you write an unknown media types.

Here’s a Pseudo-BNF of its implementation:

API Quick Guide:


BONUS: How to create custom breakpoints?

One of the coolest features we have on SuperQuery is the possibility to overwrite our default breakpoints into your own custom.

Here is how to do:

Then you should be able to use it in the same conditions as the default breakpoints, see:


That’s it for now! If you want to follow SuperQuery, if you check it out in its GitHub Repository.

NERDJACKING

JavaScript and other stuff that you may or may not need it

Marcos Gonçalves

Written by

Senior Fullstack/Frontend Engineer & Entrepreneur. Also a lover of a good beer in his spare time. #code-just-once #code-better

NERDJACKING

JavaScript and other stuff that you may or may not need it

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade