react-styled-mediaquery
is a simple and practical function for managing media queries in react with styled components.
Also: See example folder in gatsby/pages
. You can run it locally using Gatsby just clone the repos and use yarn start
in your CLI. Demo is running on localhost:8000
yarn | npm |
---|---|
yarn add react-styled-mediaquery | npm add react-styled-mediaquery |
import React from "react";
import { mediaQuery } from "react-styled-mediaquery";
const Card = styled.div`
background: red;
${mediaQuery("<", "tablet")`
background: blue;
`}
${mediaQuery(">", "desktop")`
background: yellow;
`}
`
const App = () => {
return (
<div>
<Card>hello world</Card>
</div>
)
}
You can either use the default breakpoints shortcuts using the string mobile | phablet | tablet | desktop
. Just mix your condition and breakpoints as you wish !
Element will be blue above the tablet breakpoint
${mediaQuery(">", "tablet")`
background: blue;
`}
Element will be blue above & including the mobile breakpoint
${mediaQuery("=>", "mobile")`
background: blue;
`}
Element will be blue below desktop breakpoints
${mediaQuery("<", "desktop")`
background: blue;
`}
Element will be blue below & including the phablet breakpoint
${mediaQuery("<=", "phablet")`
background: blue;
`}
Element will be blue between the phablet and desktop breakpoint
${mediaQuery("between", "phablet", "desktop")`
background: blue;
`}
These are the default settings, you can overwrite with your own breakpoints
const devices = {
mobile: "412px",
phablet: "600px",
tablet: "768px",
desktop: "1024px"
};
You can also use the function with a custom declarative breakpoint in pixel i.e:
${mediaQuery("<", "638px")`
background: blue;
`}