https://github.com/pixelize/react-styled-mediaquery

Simple and practical utility for managing media queries in react with styled components
https://github.com/pixelize/react-styled-mediaquery

breakpoints custom-breakpoints media media-queries mediaqueries mediaquery mobile queries query react responsive rwd styled-components styledcomponents tablet

Last synced: 3 months ago
JSON representation

Simple and practical utility for managing media queries in react with styled components

• Host: GitHub
• URL: https://github.com/pixelize/react-styled-mediaquery
• Owner: pixelize
• License: mit
• Created: 2019-10-03T06:55:30.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-06-10T00:12:44.000Z (over 1 year ago)
• Last Synced: 2024-09-29T00:02:42.503Z (3 months ago)
• Topics: breakpoints, custom-breakpoints, media, media-queries, mediaqueries, mediaquery, mobile, queries, query, react, responsive, rwd, styled-components, styledcomponents, tablet
• Language: JavaScript
• Homepage:
• Size: 811 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# 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](https://pixelize.github.io/react-styled-mediaquery/)

Also: See example folder in `gatsby/pages`. You can run it locally using [Gatsby](https://www.gatsbyjs.org/) 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

```jsx

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 (

    


      hello world

    

  )

}

```


## 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

```jsx

${mediaQuery(">", "tablet")`

  background: blue;

`}

```

### =>

Element will be blue above & including the mobile breakpoint

```jsx

${mediaQuery("=>", "mobile")`

  background: blue;

`}

```

### <

Element will be blue below desktop breakpoints

```jsx

${mediaQuery("<", "desktop")`

  background: blue;

`}

```

### <=

Element will be blue below & including the phablet breakpoint

```jsx

${mediaQuery("<=", "phablet")`

  background: blue;

`}

```

### between

Element will be blue between the phablet and desktop breakpoint

```jsx

${mediaQuery("between", "phablet", "desktop")`

  background: blue;

`}

```

## 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")`

  background: blue;

`}

```