Docs
Hooks
useMediaIndex

`useMediaIndex()`

Beta: this hook is in beta — its API may change in a future release.

Returns the index of the current media breakpoint, based on the media values of the current theme. Useful for picking values from responsive property arrays outside of CSS.

import {useMediaIndex} from '@sanity/ui'

function App() {
  // With the default theme breakpoints
  // ([360, 600, 900, 1200, 1800, 2400]),
  // `mediaIndex` is 0 below 360px wide,
  // 1 between 360px and 599px, and so on.
  const mediaIndex = useMediaIndex()

  return <>{mediaIndex >= 2 ? 'Wide layout' : 'Narrow layout'}</>
}

Signature

() => number

Made withby folks at

Docs
Hooks
useMediaIndex

`useMediaIndex()`

Beta: this hook is in beta — its API may change in a future release.

Returns the index of the current media breakpoint, based on the media values of the current theme. Useful for picking values from responsive property arrays outside of CSS.

import {useMediaIndex} from '@sanity/ui'

function App() {
  // With the default theme breakpoints
  // ([360, 600, 900, 1200, 1800, 2400]),
  // `mediaIndex` is 0 below 360px wide,
  // 1 between 360px and 599px, and so on.
  const mediaIndex = useMediaIndex()

  return <>{mediaIndex >= 2 ? 'Wide layout' : 'Narrow layout'}</>
}import {useMediaIndex} from '@sanity/ui'

function App() {
  // With the default theme breakpoints
  // ([360, 600, 900, 1200, 1800, 2400]),
  // `mediaIndex` is 0 below 360px wide,
  // 1 between 360px and 599px, and so on.
  const mediaIndex = useMediaIndex()

  return <>{mediaIndex >= 2 ? 'Wide layout' : 'Narrow layout'}</>
}

Signature

() => number

Made withby folks at

import {useMediaIndex} from '@sanity/ui'

function App() {
  // With the default theme breakpoints
  // ([360, 600, 900, 1200, 1800, 2400]),
  // `mediaIndex` is 0 below 360px wide,
  // 1 between 360px and 599px, and so on.
  const mediaIndex = useMediaIndex()

  return <>{mediaIndex >= 2 ? 'Wide layout' : 'Narrow layout'}</>
}

import {useMediaIndex} from '@sanity/ui'

function App() {
  // With the default theme breakpoints
  // ([360, 600, 900, 1200, 1800, 2400]),
  // `mediaIndex` is 0 below 360px wide,
  // 1 between 360px and 599px, and so on.
  const mediaIndex = useMediaIndex()

  return <>{mediaIndex >= 2 ? 'Wide layout' : 'Narrow layout'}</>
}