Go Main page
Go Main page

Web components

Foundations
Components
About
cover

utilities types

useActiveBreakpoints

v.1.0.0 | Saturn
Healthy
Github

Unlike useMediaDevice, this hook indicates for each breakpoints if it's active or not.

Params

No params are required.

Response

  • isMobile: boolean that indicates if the user is using a mobile device.
  • isTablet: boolean that indicates if the user is using a tablet device.
  • isDesktop: boolean that indicates if the user is using a desktop device.
  • isLargeDesktop: boolean that indicates if the user is using a large desktop device.
  • device: DeviceBreakpointsType that indicates the device the user is using.

Usage example

12345678910
import { useActiveBreakpoints } from '@kubit-ui-web/react-components';

const MyComponent = () => {
  const { isMobile, isTablet, isDesktop, isLargeDesktop, device } = useActiveBreakpoints();

  return (
    <div>
      <p>Is Mobile: {isMobile}</p>
      <p>Is Tablet: {isTablet}</p>
      <p>Is Desktop: {isDesktop}</p>
EnumsTextComponentType
HooksuseId