CSS media query hooks, it is implemented through the MediaQuery
API.
If you just want to build the layout, try Grid Component.
This is custom React Hooks, you need to follow the Basic Rules when you use it.
You can choose to match up or down.
Override the default breakpoints of the @brudi/hui
.
const breakpoints: HuiThemesBreakpoints = {
xs: { min: '0', max: '650px' },
sm: { min: '650px', max: '900px' },
md: { min: '900px', max: '1280px' },
lg: { min: '1280px', max: '1920px' },
xl: { min: '1920px', max: '10000px' },
}
const App = () => (
<HuiProvider theme={{ breakpoints: breakpoints }}>
<CssBaseline />
<AppComponent />
</HuiProvider>
)
useMediaQuery
type ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mobile'
type ResponsiveOptions = {
match?: 'up' | 'down'
ssrMatchMedia?: (query: string) => { matches: boolean }
}
const useMediaQuery = (breakpoint: ResponsiveBreakpoint, options?: ResponsiveOptions) => boolean