🎠 Super-Query

Description

Want a simple code demonstration?

const myStyledComponent = styled.div`
 ...
 ${SuperQuery().minWidth.of('360px').and.maxWidth.of('1024px').css`
 content: 'this is awesome!'
 `}
`

const myStyledComponent = styled.div`
 ...
 ${SperQuery().minWidth.sm.and.maxWidth.lg.css`
 content: 'this is even more awesome!'
 `}
`

const myStyledComponent = styled.div`
 ...
 ${SuperQuery().maxWidth.md.and.landscape.css`
 content: 'Yep! Your device is on landscape mode!'
 `}
`

const myStyledComponent = styled.div`
 ...
 ${SuperQuery()
 .screen
 .and
 .deviceAspectRatio
 .of('16/9')
 .or
 .screen
 .and
 .deviceAspectRatio
 .of('16/10')
 .css`
 content: 'Yep! Your device is on landscape mode!'
 `}
`

Installation

yarn add @themgoncalves/super-query

npm install @themgoncalves/super-query

How to use

import SuperQuery from '@themgoncalves/super-query';

const Title = styled.h1`
 color: #666;
 font-size: 16px;
 ${SuperQuery().minWidth.lg.css`
 font-size: 20px;
 `};
 ${SuperQuery().minWidth.lg.and.landscape.css`
 font-size: 26px;
 `};
`;

Implementation TIP!

// theme.js
import SuperQuery from '@themgoncalves/super-query';
const theme = {
 typography: {
 fonts: {
 roboto: "'Roboto', sans-serif",
 },
 },
 SuperQuery: SuperQuery(breakpoints),
};
export default theme;

const myStyledComponent = styled.div`
 ...
 ${props.theme.SuperQuery.minWidth.sm.and.maxWidth.lg.css`
 content: 'this is even more awesome!'
 `}
`

API Documentation

The Media Query Syntax

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

Built-in Breakpoints

Media Type

Media Feature

Screen Orientation

Logical Operator

Render CSS

const List = styled.ul`
 list-style: none;
 padding: 0;
 margin: 0;
 SuperQuery().minWidth.md.css`
 color: white;
 font-size: 14px;
 text-decoration: none;
 `
`

How to create custom breakpoints?

import SuperQuery from '@themgoncalves/super-query';
// Here is an example of a custom breakpoint
const customBreakpoints = {
 extraSmall: 360,
 small: 640,
 medium: 960,
 large: 1024,
 extraLarge: 1200,
 superExtraLarge: 1600,
};
// Then just import your custom breakpoints into the `SuperQuery`
// and you are Zready start use it!
const Title = styled.h1`
 color: #666;
 font-size: 16px;
 ${SuperQuery(customBreakpoints).minWidth.superExtraLarge.css`
 font-size: 20px;
 `};
`;
// Or your custom breakpoints directly from `ThemeProvider`
const Title = styled.h1`
 color: #666;
 font-size: 16px;
 ${props => SuperQuery(props.theme.breakpoints).minWidth.superExtraLarge.css`
 font-size: 20px;
 `};
`;

Orientation

import { Orientation } from '@themgoncalves/super-query';
// or you can import direct the module
import Orientation from '@themgoncalves/super-query/orientation';

Orientation.onChange((orientation) => {
 console.info('Screen orientation has changed to: ', orientation);
});

const currentOrientation = Orientation.current();
console.info('Current screen orientation: ', currentOrientation);

// screen orientations available to be locked:
// landscape-primary
// landscape-secondary
// portrait-primary
// portrait-secondary
const wasScreenLocked = Orientation.lock('portrait-primary');
// or you can pass an array with the orientations to be locked
const wasScreenLocked = Orientation.lock(['portrait-primary', 'portrait-secondary']);
console.info('Was screen locked? ', wasScreenLocked);

const wasScreenUnlocked = Orientation.unlock();
console.info('Was screen unlocked? ', wasScreenUnlocked);

const wasScreenOrientationLocked = Orientation.isLocked();
console.info('Was screen orientation locked before? ', wasScreenOrientationLocked);

Release History

Meta

Author

License

Contributing