morajabi / styled-media-query

💅💍 Better media queries for styled-component
MIT License
1.32k stars 53 forks source link

defining generateMedia breakpoints using type Number #30

Open yairEO opened 3 years ago

yairEO commented 3 years ago

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 :)

ApacheEx commented 3 years ago

Hello, this is a really nice idea 👍

Feel free to create a PR

yairEO commented 3 years ago

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