UseBreakpoint

Last updated: 2.0.0 (22/01/2024)

This hook forms part of the Responsiveness utility system. For more information about how this system works, see Responsiveness.

useBreakpoint is a hook that returns the current responsive breakpoint. The hook will use breakpoint attributes defined in the ValenceProvider to determine the current device breakpoint.

Usage

import { useBreakpoint, Button } from "@valence-ui/core";

function MyComponent() { 
    const { isMobile } = useBreakpoint();
    
    return ( 
        <Button
            color={isMobile ? "blue" : "red"}
        >
            I'm a button!
        </Button>
    )
}

Return type

Attribute	Type	Description
isMobile	boolean	Is the current breakpoint "mobile"?
isTablet	boolean	Is the current breakpoint "tablet"?
isDefault	boolean	Is the current breakpoint "default"?
isDesktopLarge	boolean	Is the current breakpoint "desktopLarge"?
isTV	boolean	Is the current breakpoint "tv"?