Geist UI

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.

General

MediaQuery match: mdlg.

Code Editor

() => {
  const isXS = useMediaQuery('xs')
  const isSM = useMediaQuery('sm')
  const isMD = useMediaQuery('md')
  const isLG = useMediaQuery('lg')
  const isXL = useMediaQuery('xl')
  return (
    <>
      MediaQuery match: <Code>{isXS && 'xs'}{isSM && 'sm'}{isMD && 'md'}{isLG && 'lg'}{isXL && 'xl'}</Code>.
    </>
  )
}

() => {
  const isXS = useMediaQuery('xs')
  const isSM = useMediaQuery('sm')
  const isMD = useMediaQuery('md')
  const isLG = useMediaQuery('lg')
  const isXL = useMediaQuery('xl')
  return (
    <>
      MediaQuery match: <Code>{isXS && 'xs'}{isSM && 'sm'}{isMD && 'md'}{isLG && 'lg'}{isXL && 'xl'}</Code>.
    </>
  )
}

Match Type

You can choose to match up or down.

Current screen width >= md.

Code Editor

() => {
  const upMD = useMediaQuery('md', { match: 'up' })
  return (
    <>
      Current screen width <b>{upMD ? '>=' : '<='}</b> <Code>md</Code>.
    </>
  )
}

() => {
  const upMD = useMediaQuery('md', { match: 'up' })
  return (
    <>
      Current screen width <b>{upMD ? '>=' : '<='}</b> <Code>md</Code>.
    </>
  )
}

custom breakpoints

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

const breakpoints: GeistUIThemesBreakpoints = {
  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 (
    <GeistProvider themes={[myTheme]} themeType="myTheme">
      <CssBaseline />
      <AppComponent />
    </GeistProvider>
  )
}

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

Contributors

Geist is an open source project from the community.