woocommerce/packages/woocommerce-blocks/assets/js/base/hooks/use-container-queries.ts
2021-12-10 12:03:04 +00:00

48 lines
1.3 KiB
TypeScript

/**
* External dependencies
*/
import { useResizeObserver } from '@wordpress/compose';
/**
* Returns a resizeListener element and a class name based on its width.
* Class names are based on the smaller of the breakpoints:
* https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
* Values are also based on those breakpoints minus ~80px which is approximately
* the left + right margin in Storefront with a font-size of 16px.
* _Note: `useContainerQueries` will return an empty class name `` until after
* first render_
*
* @return {Array} An array of {Element} `resizeListener` and {string} `className`.
*
* @example
*
* ```js
* const App = () => {
* const [ resizeListener, containerClassName ] = useContainerQueries();
*
* return (
* <div className={ containerClassName }>
* { resizeListener }
* Your content here
* </div>
* );
* };
* ```
*/
export const useContainerQueries = (): [ React.ReactElement, string ] => {
const [ resizeListener, { width } ] = useResizeObserver();
let className = '';
if ( width > 700 ) {
className = 'is-large';
} else if ( width > 520 ) {
className = 'is-medium';
} else if ( width > 400 ) {
className = 'is-small';
} else if ( width ) {
className = 'is-mobile';
}
return [ resizeListener, className ];
};