useMedia

useMedia is an custom hook for utilizing media queries in your component logic.

Import#

import { useMedia } from '@dwarvesf/react-hooks'

Usage#

Resize your browser window: 4

function Example() {
  const columnCount = useMedia(
    ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
    [5, 4, 3],
    2,
  )
  return <div>Resize your browser window: {columnCount}</div>
}

Editable Example

Desktop view

function Example() {
  const isMobile = useMedia(['(max-width: 512px)'], [true], false)
  return <div>{isMobile ? 'Mobile view' : 'Desktop view'}</div>
}

Editable Example

Parameters#

The useDisclosure hook accepts an list of following paramesters:

useMedia(queries, values, defaultValue)

Name	Type	Default	Description
`queries`	`string[]`	`_`	The list of media queries.
`values`	`any[]`	`_`	The values relate to the list of media queries by array index.
`defaultValue`	`any`	`_`	The default value if none of the values matches the media queries.

Edit this page