Server IP : 104.21.14.103 / Your IP : 3.149.23.54 Web Server : LiteSpeed System : Linux business53.web-hosting.com 4.18.0-553.lve.el8.x86_64 #1 SMP Mon May 27 15:27:34 UTC 2024 x86_64 User : giankuin ( 1871) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /proc/thread-self/root/home/giankuin/sieuthiweb.com.vn/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/hooks/ |
Upload File : |
/** * 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 aproximately * 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 = () => { 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 ]; };