morajabi / styled-media-query

💅💍 Better media queries for styled-component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

defining generateMedia breakpoints using type Number

yairEO opened this issue · comments

Hi, I love this package and would like to ask to allow configuring the generateMedia object with numbers instead of strings with units, so internally you will check the type and if it's a number you'll convert it to string and add px.

I ask this because this is how I use your package:

import { generateMedia } from 'styled-media-query' 

export const viewports = {
  mobile: "460px",
  l     : "1200px",
  xl    : "1800px",
  huge  : "2200px"
}

const media = generateMedia(viewports)

media.below = media.lessThan
media.above = media.greaterThan

export default media

As you can see, I renamed the methods because I didn't like the long names, I keep forgetting them, so the shorter the better for me. anyway, I am exporting the viewports variable because I need to use it in javascript as well, and I would prefer your library to understand the numbers mean pixels so I won't have to do the transformation on my end:

export const viewports = {
  mobile: 460,
  l     : 1200,
  xl    : 1800,
  huge  : 2200
}

it would be useful for others as well, this is why I ask this, instead of countless devs making it work with numbers, it would be useful if supported out-of-the-box as my request is not something out of the ordinary and many times there should be coupling because css and js values. (working DRY, avoiding possible bugs)

Thanks :)

Hello, this is a really nice idea 👍

Feel free to create a PR

Sorry but I have no time for PR since I am the owner of countless other repos and I have a TON of issues myself to to deal with in my own repos before coding for other's repos :) priorities... I simply gave you the suggestion for you to think about and hopefully code yourself or wait for another random person to come code it as a PR