We divide all devices into 6 groups:
| Device category | Min. device width (px) |
|---|---|
| MOBILE_SMALL | 0 |
| MOBILE_LARGE | 360 |
| TABLET_SMALL | 480 |
| TABLET_LARGE | 768 |
| DESKTOP_SMALL | 992 |
| DESKTOP_LARGE | 1200 |
You can get these values for dynamic processing as follows:
typescriptimport { BREAKPOINTS } from '@open-condo/ui/hooks' console.log(BREAKPOINTS.TABLET_LARGE) // 768
However, in most cases you will not have to handle the values manually, because
Condo UI provides developers with 2 React-hooks for creating adaptive pages and components:
useContainerSize and useBreakpoints.useContainerSize
This hook observes your container with
React.ref and returns the dimensions of that container,
allowing you to modify its contents based on those dimensions:typescriptimport React from 'react' import { useContainerSize } from '@open-condo/ui/hooks' const MIN_COL_WIDTH = 250 const CardGrid: React.FC = () => { const [{ width, height }, setRef] = useContainerSize() const cardsPerRow = Math.max(1, Math.floor(width / MIN_COL_WIDTH)) return ( <div className='my-container' ref={setRef}> {/* ... */} </div> ) }
The main use of this hook is to dynamically define columns in the grid, and to define fill
and positioning of child subcomponents inside the parent container, but it can be used
for almost any purpose, even in combination with the values above.
useBreakpoints
The
useBreakpoints hook returns an object with all active breakpoints. This is what the data looks like for a window width of 900px:typescriptimport { useBreakpoints } from '@open-condo/ui/hooks' const breakpoints = useBreakpoints() console.log(breakpoints.MOBILE_SMALL) // true, 900px >= 0px console.log(breakpoints.TABLET_LARGE) // true, 900px >= 768px console.log(breakpoints.DESKTOP_SMALL) // false, 900px < 992px
Thus, to change the layout on all tablets, the following condition must be met:
typescriptimport { useBreakpoints } from '@open-condo/ui/hooks' const breakpoints = useBreakpoints() if (breakpoints.TABLET_SMALL && !breakpoints.DESKTOP_SMALL) { // at least small tablet, but not small desktop yet }
This hook is designed to adapt the entire layout. Most Condo UI components automatically adapt to these breakpoints,
However, you will probably want to change their arrangement with this hook as well.
Note that for mini-applications, the width of the window is not the size of the browser tab, but the size of the IFrame window in which the application is opened.