useDensity

Import

import { useDensity } from '@contentful/f36-utils';

Examples

Component styling

Use the useDensity hook to add high-density support styling to your component.
The component will pick up the density defined in the DensityContainer component.

Hide code
function YourComponent() {
  const density = useDensity();

  const styles = {
    box: css({
      color: density === 'high' ? 'red' : 'green',
    }),
  };

  return <Box className={styles.box}>Content</Box>;
}
function YourComponent() {
  const density = useDensity();

  const styles = {
    box: css({
      color: density === 'high' ? 'red' : 'green',
    }),
  };

  return <Box className={styles.box}>Content</Box>;
}