A handy CSS media query methods of JS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
media
src
.gitignore
.nvmrc
LICENSE
README.md
jest.config.js
package.json
tsconfig.json
tsconfig.prod.json
tslint.json
yarn.lock

README.md

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