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>
  )
}

useMediaQuery

useViewportChange

Last modified 3yr ago