Simple and practical utility for managing media queries in react with styled components
npm install react-styled-mediaqueryreact-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 |
``jsx
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 (
Conditions & default breakpoints
You can either use the default breakpoints shortcuts using the string
mobile | phablet | tablet | desktop. Just mix your condition and breakpoints as you wish !$3
Element will be blue above the tablet breakpoint
`jsx
${mediaQuery(">", "tablet")}
`$3
Element will be blue above & including the mobile breakpoint`jsx
${mediaQuery("=>", "mobile")}
`$3
Element will be blue below desktop breakpoints`jsx
${mediaQuery("<", "desktop")}
`$3
Element will be blue below & including the phablet breakpoint`jsx
${mediaQuery("<=", "phablet")}
`$3
Element will be blue between the phablet and desktop breakpoint`jsx
${mediaQuery("between", "phablet", "desktop")}
`Custom Breakpoints
These are the default settings, you can overwrite with your own breakpoints
`jsx
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:
`jsx
${mediaQuery("<", "638px")}
``