useDensity

Use this hook to adapt your component styling/rendering based on the density.
The density is retrieved from the DensityProvider.

Import

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

Examples

Component styling

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

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

  return (
    <Paragraph marginBottom="0" className={styles.paragraph}>
      The quick brown fox jumps over the lazy dog like an over-motivated frog.
    </Paragraph>
  );
}

Help improve this page