components

useMediaQuery (code)

Get responsive value for the active breakpoint.

MediaQuery: xs, redBase

import { useMediaQuery } from '@mediahuis/chameleon-react'

() => {
  // Object example: not all breakpoints need to be set
  const bgColor = useMediaQuery(
    {
      xs: 'greyBase',
      sm: 'blueBase',
      md: 'greenBase',
      lg: 'whiteBase',
      xl: 'redBase',
    },
    'redBase' // defaultValue
  );

  // Array examle
  const mediaQueryName = useMediaQuery(
    ['xs', 'sm', 'md', 'lg', 'xl'],
    'xs' // defaultValue
  );

  return (
    <Box bgColor={bgColor} p={5}>
      MediaQuery: {mediaQueryName}, {bgColor}
    </Box>
  );
};

() => {
  // Object example: not all breakpoints need to be set
  const bgColor = useMediaQuery(
    {
      xs: 'greyBase',
      sm: 'blueBase',
      md: 'greenBase',
      lg: 'whiteBase',
      xl: 'redBase',
    },
    'redBase' // defaultValue
  );
  // Array examle
  const mediaQueryName = useMediaQuery(
    ['xs', 'sm', 'md', 'lg', 'xl'],
    'xs' // defaultValue
  );
  return (
    <Box bgColor={bgColor} p={5}>
      MediaQuery: {mediaQueryName}, {bgColor}
    </Box>
  );
};

Breakpoints

xs: 0 and up - Mobile (portrait) | Grid Fluid

sm: 375px and up - Mobile (landscape) | Grid Fluid

md: 768px and up - Tablet (portrait) | Grid Fluid

lg: 1024px and up - Desktop (13inch) / Tablet (landscape) | Grid Fluid

xl: 1320px and up - HD Desktop (15inch and up) | Grid Static: 1200

Only use this in clientside applications!

Although this hook will use the fallback value in serverside context. It's recommended to use it only in clientside applications. Under the hood we use window.matchMedia.

Array

The default value will be used when window is not available.

MediaQuery: xs, redBase, dashed

import { useMediaQuery } from '@mediahuis/chameleon-react'

() => {
  const bgColor = useMediaQuery(
    ['greyBase', 'blueBase', 'greenBase', 'whiteBase', 'redBase'],
    'redBase' // defaultValue
  );

  // sm and md will fallback to the value of xs
  const borderStyle = useMediaQuery(
    ['dotted', , , 'double', 'dashed'],
    'dashed' // defaultValue
  );

  const mediaQueryName = useMediaQuery(
    ['xs', 'sm', 'md', 'lg', 'xl'],
    'xs' // defaultValue
  );

  return (
    <Box
      bgColor={bgColor}
      borderStyle={borderStyle}
      borderColor="blackBase"
      borderWidth={4}
      p={5}
    >
      MediaQuery: {mediaQueryName}, {bgColor}, {borderStyle}
    </Box>
  );
};

() => {
  const bgColor = useMediaQuery(
    ['greyBase', 'blueBase', 'greenBase', 'whiteBase', 'redBase'],
    'redBase' // defaultValue
  );
  // sm and md will fallback to the value of xs
  const borderStyle = useMediaQuery(
    ['dotted', , , 'double', 'dashed'],
    'dashed' // defaultValue
  );
  const mediaQueryName = useMediaQuery(
    ['xs', 'sm', 'md', 'lg', 'xl'],
    'xs' // defaultValue
  );
  return (
    <Box
      bgColor={bgColor}
      borderStyle={borderStyle}
      borderColor="blackBase"
      borderWidth={4}
      p={5}
    >
      MediaQuery: {mediaQueryName}, {bgColor}, {borderStyle}
    </Box>
  );
};

Object

MediaQuery: xs, redBase, dashed

import { useMediaQuery } from '@mediahuis/chameleon-react'

() => {
  // Object example: not all breakpoints need to be set
  const bgColor = useMediaQuery(
    {
      xs: 'greyBase',
      sm: 'blueBase',
      md: 'greenBase',
      lg: 'whiteBase',
      xl: 'redBase',
    },
    'redBase' // defaultValue
  );

  // sm, md will fallback to the value of xs
  const borderStyle = useMediaQuery(
    {
      xs: 'dotted',
      lg: 'double',
      xl: 'dashed',
    },
    'dashed' // defaultValue
  );

  const mediaQueryName = useMediaQuery(
    {
      xs: 'xs',
      sm: 'sm',
      md: 'md',
      lg: 'lg',
      xl: 'xl',
    },
    'xs' // defaultValue
  );

  return (
    <Box
      bgColor={bgColor}
      borderStyle={borderStyle}
      borderColor="blackBase"
      borderWidth={4}
      p={5}
    >
      MediaQuery: {mediaQueryName}, {bgColor}, {borderStyle}
    </Box>
  );
};

() => {
  // Object example: not all breakpoints need to be set
  const bgColor = useMediaQuery(
    {
      xs: 'greyBase',
      sm: 'blueBase',
      md: 'greenBase',
      lg: 'whiteBase',
      xl: 'redBase',
    },
    'redBase' // defaultValue
  );
  // sm, md will fallback to the value of xs
  const borderStyle = useMediaQuery(
    {
      xs: 'dotted',
      lg: 'double',
      xl: 'dashed',
    },
    'dashed' // defaultValue
  );
  const mediaQueryName = useMediaQuery(
    {
      xs: 'xs',
      sm: 'sm',
      md: 'md',
      lg: 'lg',
      xl: 'xl',
    },
    'xs' // defaultValue
  );
  return (
    <Box
      bgColor={bgColor}
      borderStyle={borderStyle}
      borderColor="blackBase"
      borderWidth={4}
      p={5}
    >
      MediaQuery: {mediaQueryName}, {bgColor}, {borderStyle}
    </Box>
  );
};