Hooks / useBreakpoint — Carla Design System

Main navigation
Intro
OverviewGetting StartedConfiguration
Design Language
ValuesPrinciplesColorsTypographyIconsIllustrations
Guides
StylingThemingLayoutForms
Components
Core
ClickElIconButtonLabelText
Layout
BoxGridSpacer
Actions
ActionButtonActionLinkFloatingActionButton
Forms
CheckboxCheckboxCardFileInputNumberInputRadioRadioCardRadioGroupSelectInputSliderSmallCardSortingSelectorTextAreaTextInput
Disclosure
AccordionCarouselModalOverlayVisuallyHidden
Data Display
BadgeCardInfoMessageTag
Feedback
LoadingLoadingBar
Media
LogoIconsIllustrations
Formatting
CurrencyDateTimeDistance
Hooks
useBreakpointuseFielduseFormuseScrollBlockingOverlayuseStorageuseClickAway
Utilities
formatCurrencyformatDateTimeformatDistance
Hooks / useBreakpoint
useBreakpointThe 
useBreakpoint hook is used for viewport checks.
It uses a resize handler under the hood and thus only works on client-side.
Do's & Don'ts
Don't use it if you can use pure media queries or the 
display prop on Box.
ParamsName
Type
Default
Description
breakpoint*
small

|  medium

|  large

|  huge
The breakpoint which is checked using a mobile-first approach
Returns
bool: Whether the breakpoint is active or not
Examples
Dark Mode
function Component() {
  const isMedium = useBreakpoint('medium')

  return (
    <Text>
      This is <Text color="red">{isMedium ? '' : ' not '}</Text> a medium
      viewport
    </Text>
  )
}function Component() {
  const isMedium = useBreakpoint('medium')

  return (
    <Text>
      This is <Text color="red">{isMedium ? '' : ' not '}</Text> a medium
      viewport
    </Text>
  )
}
Table of Contents
Do's & Don'ts
Params
Returns
Examples