/react-screen-size

Primary LanguageJavaScript

Build Status npm version

react-screen-size

A HoC to connect your components to screen size changes

Older versions

Why would you need this

If your component logic depends on screen size then you need this.

Quick Example

const Container = ({ isTablet, isMobile, isDesktop }) => (
  ...
)

const mapScreenSizeToProps = ({ sm, xs, gtXs }) => {
  return {
    isTablet: sm,
    isMobile: xs,
    isDesktop: gtSm
  }
}

export default connectScreenSize(mapScreenSizeToProps)(Container);

API

<MediaProvider [medias] [screenSize]>

Components declared inside of a MediaProvider will be listening to screen changes.

Props

  • medias (Object?): Extend definitions for screen size criterias. Default values are:
{
  xs:   '(max-width: 600px)',
  sm:   '(max-width: 960px) and (min-width: 601px)',
  md:   '(max-width: 1280px) and (min-width: 961px)',
  lg:   '(max-width: 1920px) and (min-width: 1281px)',
  gtXs: '(min-width: 601px)',
  gtSm: '(min-width: 961px)',
  gtMd: '(min-width: 1281px)',
  gtLg: '(min-width: 1921px)',
}
  • screenSize (Object?): Set initial value of the screenSize passed to connected components, useful this for server side rendering. Default values are:
{
  xs:   false,
  gtXs: true,
  sm:   false,
  gtSm: true,
  md:   true,
  gtMd: true,
  lg:   false,
  gtLg: false
}

connectScreenSize(mapScreenSizeToProps)

Subscribes a React component to screen size changes.

Arguments

  • mapScreenSizeToProps(screenSize): screenSizeProps (Function): Any time the screen size updates mapScreenSizeToProps will be called with the active media queries as an object structure, these are the possible values
    • screenSize.xs
    • screenSize.sm
    • screenSize.md
    • screenSize.lg
    • screenSize.gtXs
    • screenSize.gtSm
    • screenSize.gtMd
    • screenSize.gtLg

Returns

A react component that will inject the resulting object of calls to mapScreenSizeToProps as props into your component