Home
Getting Started
Components
AlertAnimateHeightAvatarAvatarListBadgeButtonButtonMenuCalendarCalendarRangeCardCarouselChipClickOutsideContainerContentLoaderCurrencyDataTableDatePickerDateTimePickerDividerDrawerDropdownFloatingActionsGoogleMapGridIconIconDotIfInfiniteScrollKW LogoLoaderModalMonthPickerMonthRangeNavIconOptionsTogglePaginationPartnerLogoResponsivePropsExamplesSVG IconSnackbarStaticMapStatusIndicatorTabTableTimePickerToastsTooltip
Forms
Typography
Utilities
Visualization Components
Responsive
Used to conditionally show children based on its viewport. By default, the components within children will be rendered normally but it provides a handler called Matches and NotMatches that handle which component should be rendered.
<Matches>will render the components within it when the viewport is matched the set.
<NotMatches>will render the components within it when the viewport is not matched the set.
WARNING!
This component should be the LAST RESOURCE to be used as the Real UI has provided layout and spacing utils to handle fluid layouts.
ONLY use this component when mobile/desktop layouts are very very different.
Props
children
Node
required
defaultMatches
Bool
false
mediaQuery
{}
{
minWidth: null,
maxWidth: '767px',
}