react-styled-mediaquery

Description

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

Demo

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

Installation

yarn	npm
yarn add react-styled-mediaquery	npm add react-styled-mediaquery

Usage

importReactfrom"react";import{mediaQuery}from"react-styled-mediaquery";constCard=styled.div` background: red;${mediaQuery("<","tablet")` background: blue; `}${mediaQuery(">","desktop")` background: yellow; `}`constApp=()=>{return(<div><Card>hello world</Card></div>)}

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 !

>

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;`}

between

Element will be blue between the phablet and desktop breakpoint

${mediaQuery("between","phablet","desktop")` background: blue;`}

Custom Breakpoints

These are the default settings, you can overwrite with your own breakpoints

constdevices={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;`}