@navinc/base-react-components
Version:
Nav's Pattern Library
35 lines • 1.45 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useCallback, useContext, useRef, useState } from 'react';
import useResizeObserver from 'use-resize-observer';
export const DimensionsForContainerContext = createContext(null);
/**
* @example
* ```
* const ProvidedComponent = provideDimensionsForContainer(ParentComponent)
*
* const Child = () => {
* // useDimensionsForContainer will return the dimensions of ProvidedComponent
* const dimensions = useDimensionsForContainer()
* return <div>{dimensions?.clientWidth}x{dimensions?.clientHeight}</div>
* }
*
* <ProvidedComponent>
* <Child />
* </ProvidedComponent>
* ```
*/
export const provideDimensionsForContainer = (Component) => (props) => {
const [dimensions, setDimensions] = useState({ clientWidth: 0, clientHeight: 0 });
const ref = useRef(null);
const updateDimensions = useCallback(() => {
if (ref.current) {
setDimensions({ clientWidth: ref.current.clientWidth, clientHeight: ref.current.clientHeight });
}
}, [setDimensions]);
useResizeObserver({ ref: ref, onResize: updateDimensions });
return (_jsx(DimensionsForContainerContext.Provider, { value: dimensions, children: _jsx(Component, Object.assign({ ref: ref }, props)) }));
};
export const useDimensionsForContainer = () => {
return useContext(DimensionsForContainerContext);
};
//# sourceMappingURL=use-dimensions-for-container.js.map