@1natsu/handy-media-query

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

• 🏆 Table of contents
• ✨ Getting Started
• 💁 Usage
  • Simple
• 😌 Realistic example
  • maybe as usufull
• 🔥 APIs
  • Default exported object
    • #min(minPx, [opts])
    • #max(maxPx, [opts])
    • #between(minPx, maxPx, [opts])
      • DefaultOptions
  • Named exported methods
    • composeMediaQuery(userSelfMediaQuery)
    • pxToEm(value, ratio)
    • pxToRem(value, ratio)
• 💚 Running the tests
• Contributing
• 🏷 Versioning
• ©️ License
• 🙏 Acknowledgments
  • Inspiration

✨ 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

• styled-media-query