communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
81 lines • 2.68 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { useEffect, useState, useRef } from 'react';
import { _convertRemToPx as convertRemToPx } from "../../../../acs-ui-common/src";
/**
* A utility hook for providing the width of a parent element.
* Returns updated width if parent/window resizes.
* @param containerRef - Ref of a parent element whose width will be returned.
* @internal
*/
export const _useContainerWidth = (containerRef) => {
const [width, setWidth] = useState(undefined);
const observer = useRef(new ResizeObserver((entries) => {
if (!entries[0]) {
return;
}
const { width } = entries[0].contentRect;
if (Number.isNaN(width)) {
setWidth(0);
}
else {
setWidth(width);
}
}));
useEffect(() => {
if (containerRef.current) {
observer.current.observe(containerRef.current);
}
const currentObserver = observer.current;
return () => {
currentObserver.disconnect();
};
}, [containerRef, observer]);
return width;
};
/**
* A utility hook for providing the height of a parent element.
* Returns updated height if parent/window resizes.
* @param containerRef - Ref of a parent element whose height will be returned.
* @internal
*/
export const _useContainerHeight = (containerRef) => {
const [height, setHeight] = useState(undefined);
const observer = useRef(new ResizeObserver((entries) => {
if (!entries[0]) {
return;
}
const { height } = entries[0].contentRect;
if (Number.isNaN(height)) {
setHeight(0);
}
else {
setHeight(height);
}
}));
useEffect(() => {
if (containerRef.current) {
observer.current.observe(containerRef.current);
}
const currentObserver = observer.current;
return () => {
currentObserver.disconnect();
};
}, [containerRef, observer]);
return height;
};
const NARROW_WIDTH_REM = 30;
const SHORT_HEIGHT_REM = 23.75;
/**
* Utility function to determine if container width is narrow
* @param containerWidthRem container width in rem
* @returns boolean
*/
export const isNarrowWidth = (containerWidthRem) => containerWidthRem <= convertRemToPx(NARROW_WIDTH_REM);
/**
* Utility function to determine if container width is short
* @param containerWidthRem container height in rem
* @returns boolean
*/
export const isShortHeight = (containerHeightRem) => containerHeightRem <= convertRemToPx(SHORT_HEIGHT_REM);
//# sourceMappingURL=responsive.js.map