yocontra / react-responsive

CSS media queries in react - for responsive design, and more.
https://contra.io/react-responsive
MIT License
7.04k stars 298 forks source link

Export toQuery function #255

Closed borozcod closed 4 years ago

borozcod commented 4 years ago

It would be nice if toQuery was also exported in index.js. There have been times that the only change a component has is a simple css property, to avoid multiple renderings it would be useful to just be able to change that property with a css media query.

Here is the ideal usage:

import { toQuery } from 'react-responsive';
export const MediumQuery = toQuery({ minWidth: 640 });

Then in your styled components you could just import MediumQuery and use like this:

@media ${MediumQuery} {
    ....
}
yocontra commented 4 years ago

Interesting idea - want to send a PR that adds a few tests and exposes it?

Workaround is to import react-responsive/dist/lib/toQuery