@anton.bobrov/react-vevet-hooks/lib/esm/hooks/useBreakpointName.js

A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library

import { useState } from 'react';
import { vevet } from 'vevet';
import { useOnResize } from './useOnResize';
/**
 * Custom React hook that detects the current viewport breakpoint name.
 *
 * This hook uses the `vevet` library to determine the current viewport size
 * and assigns a corresponding breakpoint name ('desktop', 'tablet', or 'phone').
 * It updates the breakpoint name when the window is resized.
 *
 * @example
 * const MyComponent = () => {
 *   const breakpoint = useBreakpointName();
 *
 *   return (
 *     <div>
 *       Current Breakpoint: {breakpoint}
 *     </div>
 *   );
 * };
 */
export function useBreakpointName() {
    var _a = useState('phone'), name = _a[0], setName = _a[1];
    useOnResize(function () {
        if (vevet.viewport.isDesktop) {
            setName('desktop');
        }
        else if (vevet.viewport.isTablet) {
            setName('tablet');
        }
        else {
            setName('phone');
        }
    }, []);
    return name;
}
//# sourceMappingURL=useBreakpointName.js.map