UseMediaQuery

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.

Custom Breakpoints

Override the default breakpoints of the @bolio-ui/core.

const breakpoints: BolioUIThemesBreakpoints = {
  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 = () => {
  const myTheme = Themes.createFromLight({
    type: 'myTheme',
    breakpoints
  })
  return (
    <BolioProvider themes={[myTheme]} themeType="myTheme">
      <CssBaseline />
      <AppComponent />
    </BolioProvider>
  )
}

APIs

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

Edit this page on GitHub

useKeyboard

useModal

MADE & DESIGNED WITHBY BRUNO ANDRADE