@1natsu/handy-media-query

better media-query for... (e.g. styled-components, emotion, ...)

Usage no npm install needed!

<script type="module">
  import 1natsuHandyMediaQuery from 'https://cdn.skypack.dev/@1natsu/handy-media-query';
</script>

README

A handy CSS media query methods of JavaScript

Just return the media query string.

The opportunity to use… (e.g. styled-components, emotion, …)

πŸ† Table of contents

✨ Getting Started

with yarn

yarn add @1natsu/handy-media-query

or

with npm

npm install @1natsu/handy-media-query

πŸ’ Usage

Simple

import mq from '@1natsu/handy-media-query'

mq.max(480) // "@media all and (max-width: 30em)"
mq.between(481,767) // "@media all and (min-width: 30.0625em) and (max-width: 47.9375em)"
mq.min(768) // "@media all and (min-width: 48em)"

By default, the passed px is converted to em.

😌 Realistic example

maybe as usufull

mediaQuery.js

import mq, { composeMediaQuery, pxToEm } from '@1natsu/handy-media-query'

const breakpoints = {
  small: 480,
  middle: [481, 767],
  large: 768
}

const mediaQueries = composeMediaQuery({
  small: mq.max(breakpoints.small),
  middle: mq.between(breakpoints.middle[0], breakpoints.middle[1]),
  large: mq.min(breakpoints.large),
  irregular: `@media (min-height: ${pxToEm('680px')}), screen and (orientation: portrait)`
})

export { mediaQueries as mq }

Foo.jsx

As an example a component file with Styled-components(v4)

import React from 'react'
import styled from "styled-components";
import { mq } from './mediaQuery'


const Foo = ({text}) => <div>{text}</div>

const StyledFoo = styled(Foo)`
  color: blue;
  ${mq.small} {
    color: red;
  }
  ${mq.middle} {
    color: cyan;
  }
  // Local irregular……is also OK
  ${mq.between(1921,3840)} {
    color: pink;
  }
`

πŸ”₯ APIs

Default exported object

import mq from '@1natsu/handy-media-query'

#min(minPx, [opts])

name require type default decstiption
minPx βœ“ string | number - "<number>px" or number(assuming pixels)
options - object DefaultOptions
mq.min(480)
// '@media all and (min-width: 30em)'

mq.min(480, {unit: 'px', mediaType: 'screen'})
// '@media screen and (min-width: 480px)'

#max(maxPx, [opts])

name require type default decstiption
maxPx βœ“ string | number - "<number>px" or number(assuming pixels)
options - object DefaultOptions
mq.max(480)
// '@media all and (max-width: 30em)'

mq.max(480, {unit: 'px', mediaType: 'screen'})
// '@media screen and (max-width: 480px)'

#between(minPx, maxPx, [opts])

name require type default decstiption
minPx βœ“ string | number - "<number>px" or number(assuming pixels)
maxPx βœ“ string | number - "<number>px" or number(assuming pixels)
options - object DefaultOptions
mq.between(480,980)
// '@media all and (min-width: 30em) and (max-width: 61.25em)'

mq.between(480, 980, {unit: 'px', mediaType: 'screen'})
// '@media screen and (min-width: 480px) and (max-width: 61.25em)'
DefaultOptions
name require type default decstiption
unit - 'em' | 'rem' | 'px' 'em' Output unit
unitRatio - number 16 Unit ratio as a reference of 'em' or 'rem'
mediaType - 'all' | 'screen' | 'print' | 'speech' 'all' MDN - Media Query#Media-Types

Named exported methods

composeMediaQuery(userSelfMediaQuery)

Return a new object with {passed argument object} + {media query methods}

This function merges media query methods & passed with the object. So it's necessary to avoid duplicate property names.

name require type default decstiption
userSelfMediaQuery βœ“ object - Object with string media query in value
import { composeMediaQuery } from '@1natsu/handy-media-query'

const mediaQueries = composeMediaQuery({
  small: '@media (min-width: 320px)'
  middle: '@media (min-width: 768px)'
  large: '@media (min-width: 1280px)'
  irregular: `@media (min-height: 400px), screen and (orientation: portrait)`
})

↓↓ The contents of the generated object are as follows ↓↓

const mediaQueries = {
  small: '@media (min-width: 320px)'
  middle: '@media (min-width: 768px)'
  large: '@media (min-width: 1280px)'
  irregular: '@media (min-height: 400px), screen and (orientation: portrait)'
  min: [Function]
  max: [Function]
  between: [Function]
  …
  …
  …
}

But, assume a usage like a Realistic example

pxToEm(value, ratio)

  • Unit converter for px to em
name require type default decstiption
value βœ“ string | number - Conversion source px.
"<number>px" or number
ratio - number 16 Unit ratio as a reference of 'em'
import { pxToEm } from '@1natsu/handy-media-query'

const convertToEm = pxToEm(480, 10)
console.log(convertToEm) // 48em

pxToRem(value, ratio)

  • Unit converter for px to rem
name require type default decstiption
value βœ“ string | number - Conversion source px.
"<number>px" or number
ratio - number 16 Unit ratio as a reference of 'rem'
import { pxToRem } from '@1natsu/handy-media-query'

const convertToRem = pxToRem(480, 10)
console.log(convertToRem) // 48rem

πŸ’š Running the tests

with Jest.

yarn test

or

npm run test

🏷 Versioning

Use SemVer for versioning. For the versions available, see the tags on this repository.

©️ License

MIT Β© 1natsu172

πŸ™ Acknowledgments

Inspiration