react-styled-mediaquery is a simple and practical function for managing media queries in react with styled components.

Github page

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

import React, { useState } from "react"; import { mediaQuery } from "react-styled-mediaquery"; const Card = styled.div`  background: red;   ${mediaQuery("<", "tablet")`  background: blue;  `}   ${mediaQuery(">", "desktop")`  background: red;  `} ` 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; `}