ScreenSizeProvider

The ScreenSizeProvider gives a programatic way of determining what the current “size” of the screen is, according to the theme’s mediaQueries object. The possible sizes are directly from the media queries object (“small”, “medium”, “large”, “extraLarge”), with the addition of “tiny” when none of the media queries match. Because it uses theme.mediaQueries, it should be nested inside a StyleProvider; otherwise it will always give the default size of “large”.

Basic Usage

You can utilize the value of the provider via the useScreenSize hook. The value is not a string, but calling toString() on it will give you the name of the size. There is also a SIZES constant that can be used to do comparison logic.

import { SIZES, useScreenSize } from '@repay/cactus-web'

const SmallScreensOnly = () => {
  const size = useScreenSize()
  if (size < SIZES.medium) {
    return `This screen is ${size.toString()}.`
  }
  return null
}

// The output will be either null, "This screen is tiny.", or "This screen is small."

Try it out

function ScreenSize() {
  const size = useScreenSize()
  return <>{size.toString()}</>
}
render(<StyleProvider><ScreenSizeProvider><ScreenSize/></ScreenSizeProvider></StyleProvider>)

Properties

Takes no props, only children.