useMediaQuery

Import

import { useMediaQuery } from '@zeal-ui/core';

import { useMediaQuery } from '@zeal-ui/core';

Usage

The documentation is rendering in a mobile

Editable Code

function useMediaQueryDemo() {
    const [isDesktop] = useMediaQuery(['(min-width: 1024px)']);
    return (
        <Badge color="success" width={`${isDesktop ? '50%' : '100%'}`}>
            The documentation is rendering in a {isDesktop ? 'desktop' : 'mobile'}
        </Badge>
    );
}

function useMediaQueryDemo() {
    const [isDesktop] = useMediaQuery(['(min-width: 1024px)']);
    return (
        <Badge color="success" width={`${isDesktop ? '50%' : '100%'}`}>
            The documentation is rendering in a {isDesktop ? 'desktop' : 'mobile'}
        </Badge>
    );
}