---
name: ScreenSizeProvider
menu: Components
---

import ScreenSizeProvider, { SIZES, useScreenSize } from './ScreenSizeProvider'
import StyleProvider from '../StyleProvider/StyleProvider'
import { livePreviewStyle } from '../helpers/constants'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'


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

```jsx
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

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

<LiveProvider code={code} scope={{ ScreenSizeProvider, SIZES, StyleProvider, useScreenSize }} noInline>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Properties

Takes no props, only `children`.