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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBreakpointName = void 0;
var react_1 = require("react");
var vevet_1 = require("vevet");
var useOnResize_1 = require("./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>
 *   );
 * };
 */
function useBreakpointName() {
    var _a = (0, react_1.useState)('phone'), name = _a[0], setName = _a[1];
    (0, useOnResize_1.useOnResize)(function () {
        if (vevet_1.vevet.viewport.isDesktop) {
            setName('desktop');
        }
        else if (vevet_1.vevet.viewport.isTablet) {
            setName('tablet');
        }
        else {
            setName('phone');
        }
    }, []);
    return name;
}
exports.useBreakpointName = useBreakpointName;