useResponsiveQuery

Specification

React hook that accepts a responsive props interface and resolves to a boolean verdict, indicating whether current viewport matches the given range.

Definition

type UseResponsiveQuery = (
  params: UseResponsiveQueryParams,
  initialMatches: boolean
) => boolean


interface UseResponsiveQueryParams {
  for: BreakpointRef
  from: BreakpointRef
  to: BreakpointRef
  except: boolean
}

type BreakpointRef = MediaQuery | string

Examples

import { useResponsiveQuery } from 'atomic-layout'

export const UsageExample = () => {
  const inScreenRange = useResponsiveQuery({ from: 'sm', to: 'lg' })
  
  return (
    <div>
      {inScreenRange && <h1>Component</h1>}
    </div>
  )
}