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

1
type UseResponsiveQuery = (
2
params: UseResponsiveQueryParams,
3
initialMatches: boolean
4
) => boolean
5
6
7
interface UseResponsiveQueryParams {
8
for: BreakpointRef
9
from: BreakpointRef
10
to: BreakpointRef
11
except: boolean
12
}
13
14
type BreakpointRef = MediaQuery | string
Copied!

Examples

1
import { useResponsiveQuery } from 'atomic-layout'
2
3
export const UsageExample = () => {
4
const inScreenRange = useResponsiveQuery({ from: 'sm', to: 'lg' })
5
6
return (
7
<div>
8
{inScreenRange && <h1>Component</h1>}
9
</div>
10
)
11
}
Copied!
Last modified 1yr ago