Styled-Components & Super-Query: Responsiveness and Device control made easy
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
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.
For YARN users:
yarn add @themgoncalves/super-query
For NPM users:
npm install @themgoncalves/super-query
Note that it should not be in the devDependencies.
#2 How to use
First we need to import the package into our component;
import SuperQuery from '@themgoncalves/super-query';
Then, we are ready to mix it with
#3 API Documentation
We need to follow the base syntax bellow:
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:
media_query: [[only | not]? <media_type> [ and <expression> ]*] |
<expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| aspect-ratio | min-aspect-ratio | max-aspect-ratio
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid
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.