Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yocontra/react-responsive

CSS media queries in react - for responsive design, and more.
https://github.com/yocontra/react-responsive

react

Last synced: 3 days ago
JSON representation

CSS media queries in react - for responsive design, and more.

Awesome Lists containing this project

README 

        
# react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]



## Information



Packagereact-responsive



Description

Media queries in react for responsive design



Browser Version

>= IE6*



Demo



The best supported, easiest to use react media query module.



## Install



```console

$ npm install react-responsive --save

```



## Example Usage



### With Hooks



Hooks is a new feature available in 8.0.0!



```jsx

import React from 'react'

import { useMediaQuery } from 'react-responsive'



const Example = () => {

  const isDesktopOrLaptop = useMediaQuery({

    query: '(min-width: 1224px)'

  })

  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })

  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })

  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })

  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })



  return (

    


      
Device Test!


      {isDesktopOrLaptop && 
You are a desktop or laptop
}

      {isBigScreen && 
You have a huge screen
}

      {isTabletOrMobile && 
You are a tablet or mobile phone
}

      
Your are in {isPortrait ? 'portrait' : 'landscape'} orientation


      {isRetina && 
You are retina
}

    


  )

}

```



### With Components



```jsx

import MediaQuery from 'react-responsive'



const Example = () => (

  


    
Device Test!


    

      
You are a desktop or laptop


      

        
You also have a huge screen


      

    

    

      {/* You can also use a function (render prop) as a child */}

      {(matches) =>

        matches ? 
You are retina
 : 
You are not retina


      }

    

  


)

```



## API



### Using Properties



To make things more idiomatic to react, you can use camel-cased shorthands to construct media queries.



For a list of all possible shorthands and value types see https://github.com/yocontra/react-responsive/blob/master/src/mediaQuery.ts#L9.



Any numbers given as shorthand will be expanded to px (`1234` will become `'1234px'`).



The CSS media queries in the example above could be constructed like this:



```jsx

import React from 'react'

import { useMediaQuery } from 'react-responsive'



const Example = () => {

  const isDesktopOrLaptop = useMediaQuery({ minWidth: 1224 })

  const isBigScreen = useMediaQuery({ minWidth: 1824 })

  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 })

  const isPortrait = useMediaQuery({ orientation: 'portrait' })

  const isRetina = useMediaQuery({ minResolution: '2dppx' })



  return 
...


}

```



### Forcing a device with the `device` prop



At times you may need to render components with different device settings than what gets automatically detected. This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing.



#### Possible Keys



`orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`,

`height`, `deviceHeight`, `width`, `deviceWidth`, `color`, `colorIndex`, `monochrome`,

`resolution` and `type`



##### Possible Types



`type` can be one of: `all`, `grid`, `aural`, `braille`, `handheld`, `print`, `projection`,

`screen`, `tty`, `tv` or `embossed`



Note: The `device` property always applies, even when it can be detected (where window.matchMedia exists).



```jsx

import { useMediaQuery } from 'react-responsive'



const Example = () => {

  const isDesktopOrLaptop = useMediaQuery(

    { minDeviceWidth: 1224 },

    { deviceWidth: 1600 } // `device` prop

  )



  return (

    


      {isDesktopOrLaptop && (

        


          this will always get rendered even if device is shorter than 1224px,

          that's because we overrode device settings with 'deviceWidth: 1600'.

        


      )}

    


  )

}

```



#### Supplying through Context



You can also pass `device` to every `useMediaQuery` hook in the components tree through a React [Context](https://reactjs.org/docs/context.html).

This should ease up server-side-rendering and testing in a Node environment, e.g:



##### Server-Side Rendering



```jsx

import { Context as ResponsiveContext } from 'react-responsive'

import { renderToString } from 'react-dom/server'

import App from './App'



...

  // Context is just a regular React Context component, it accepts a `value` prop to be passed to consuming components

  const mobileApp = renderToString(

    

      

    

  )

...

```



If you use next.js, structure your import like this to disable server-side rendering for components that use this library:



```js

import dynamic from 'next/dynamic'

const MediaQuery = dynamic(() => import('react-responsive'), {

  ssr: false

})

```



##### Testing



```jsx

import { Context as ResponsiveContext } from 'react-responsive'

import { render } from '@testing-library/react'

import ProductsListing from './ProductsListing'



describe('ProductsListing', () => {

  test('matches the snapshot', () => {

    const { container: mobile } = render(

      

        

      

    )

    expect(mobile).toMatchSnapshot()



    const { container: desktop } = render(

      

        

      

    )

    expect(desktop).toMatchSnapshot()

  })

})

```



Note that if anything has a `device` prop passed in it will take precedence over the one from context.



### `onChange`



You can use the `onChange` callback to specify a change handler that will be called when the media query's value changes.



```jsx

import React from 'react'

import { useMediaQuery } from 'react-responsive'



const Example = () => {

  const handleMediaQueryChange = (matches) => {

    // matches will be true or false based on the value for the media query

  }

  const isDesktopOrLaptop = useMediaQuery(

    { minWidth: 1224 },

    undefined,

    handleMediaQueryChange

  )



  return 
...


}

```



```jsx

import React from 'react'

import MediaQuery from 'react-responsive'



const Example = () => {

  const handleMediaQueryChange = (matches) => {

    // matches will be true or false based on the value for the media query

  }



  return (

    

      ...

    

  )

}

```



## Easy Mode



That's it! Now you can create your application specific breakpoints and reuse them easily. Here is an example:



```jsx

import { useMediaQuery } from 'react-responsive'



const Desktop = ({ children }) => {

  const isDesktop = useMediaQuery({ minWidth: 992 })

  return isDesktop ? children : null

}

const Tablet = ({ children }) => {

  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })

  return isTablet ? children : null

}

const Mobile = ({ children }) => {

  const isMobile = useMediaQuery({ maxWidth: 767 })

  return isMobile ? children : null

}

const Default = ({ children }) => {

  const isNotMobile = useMediaQuery({ minWidth: 768 })

  return isNotMobile ? children : null

}



const Example = () => (

  


    Desktop or laptop

    Tablet

    Mobile

    Not mobile (desktop or laptop or tablet)

  


)



export default Example

```



And if you want a combo (the DRY way):



```js

import { useMediaQuery } from 'react-responsive'



const useDesktopMediaQuery = () =>

  useMediaQuery({ query: '(min-width: 1280px)' })



const useTabletAndBelowMediaQuery = () =>

  useMediaQuery({ query: '(max-width: 1279px)' })



const Desktop = ({ children }) => {

  const isDesktop = useDesktopMediaQuery()



  return isDesktop ? children : null

}



const TabletAndBelow = ({ children }) => {

  const isTabletAndBelow = useTabletAndBelowMediaQuery()



  return isTabletAndBelow ? children : null

}

```



## Browser Support



### Out of the box



Chrome

9



Firefox (Gecko)

6



MS Edge

All



Internet Explorer

10



Opera

12.1



Safari

5.1



### With Polyfills



Pretty much everything. Check out these polyfills:



- [matchMedia.js by Paul Irish](https://github.com/paulirish/matchMedia.js/)

- [media-match (faster, but larger and lacking some features)](https://github.com/weblinc/media-match)



[downloads-image]: http://img.shields.io/npm/dm/react-responsive.svg

[npm-url]: https://npmjs.org/package/react-responsive

[npm-image]: http://img.shields.io/npm/v/react-responsive.svg