useMediaQuery

Evaluate a CSS media query on web and width/height queries on native, updating as the viewport changes.

Responsive layout

Web: subscribes to a CSS media query via window.matchMedia. Native: parses width/height queries ((min-width: 640px), (max-height: 480px)) and watches Dimensions.addEventListener('change'). Unparseable queries on native return the supplied initialValue.

Loading demo…

import
 
{
 
Badge
,
 
Block
,
 
Row
,
 
Text
,
 useMediaQuery 
}
 
from
 
'@platform-blocks/ui'
;
 
export
 
default
 
function
 
Demo
(
)
 
{
  
const
 isCompact 
=
 
useMediaQuery
(
'(max-width: 640px)'
)
;
  
const
 isWide 
=
 
useMediaQuery
(
'(min-width: 1024px)'
)
;
  
const
 columns 
=
 isCompact 
?
 
1
 
:
 isWide 
?
 
4
 
:
 
2
;
 
  
return
 
(
    
<Block
>
      
<Row
 
gap
=
"xs"
 
wrap
=
"wrap"
>
        
<Badge
 
variant
=
{
isCompact 
?
 
'light'
 
:
 
'outline'
}
 
color
=
{
isCompact 
?
 
'success'
 
:
 
'gray'
}
>
          
Compact
 
(
≤640px
)
        
</Badge
>
        
<Badge
 
variant
=
{
isWide 
?
 
'light'
 
:
 
'outline'
}
 
color
=
{
isWide 
?
 
'success'
 
:
 
'gray'
}
>
          
Wide
 
(
≥1024px
)
        
</Badge
>
      
</Row
>
 
      
<Row
 
gap
=
"md"
 
wrap
=
"wrap"
>
        
{
Array
.
from
(
{
 length
:
 columns 
}
)
.
map
(
(
_
,
 i
)
 
=>
 
(
          
<Block
 
key
=
{
i
}
 
bg
=
"primary"
 
p
=
"md"
 
radius
=
"md"
 
minW
=
{
120
}
>
            
<Text
 
c
=
"white"
>
Card
 
{
i 
+
 
1
}
</Text
>
          
</Block
>
        
)
)
}
      
</Row
>
 
      
<Text
 
size
=
"sm"
 
colorVariant
=
"muted"
>
        
Resize
 the 
viewport
 
(
or rotate the device
)
 to see the layout adapt
.
      
</Text
>
    
</Block
>
  
)
;
}

Platform Blocks

A comprehensive React Native design system with components that work seamlessly across iOS, Android, and Web.

Quick Links

Components Charts Hooks

Documentation

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap