@media (min-width: 50em) {
   article {
     column-count: 2;
   }
 }

<img 
  srcset="image-wide.jpg 600w,
          image-ultrawide.jpg 1200w"
  sizes="(min-width: 600px) 600w,
         (min-width: 1200px) 1200w"
  src="image.jpg"
  height="300"
  width="200"
  alt="Awesome image">

 window
  .matchMedia('(min-width: 768px)')
  .matches

import { useMediaQuery } from 'usehooks-ts'

export default function Component() {
  const matches = useMediaQuery('(min-width: 768px)')

  return (
    <div>
      {`The view port is 
		${matches ? 'at least' : 'less than'} 
    	768 pixels wide`}
    </div>
  )
}

import { useEffect, useState } from 'react'

function useMediaQuery(query: string): boolean {
  const getMatches = (query: string): boolean => {
    // Prevents SSR issues
    if (typeof window !== 'undefined') {
      return window.matchMedia(query).matches
    }
    return false
  }

  const [matches, setMatches] = useState<boolean>(getMatches(query))

  function handleChange() {
    setMatches(getMatches(query))
  }

  useEffect(() => {
    const matchMedia = window.matchMedia(query)

    // Triggered at the first client-side load and if query changes
    handleChange()

    // Listen matchMedia
    if (matchMedia.addListener) {
      matchMedia.addListener(handleChange)
    } else {
      matchMedia.addEventListener('change', handleChange)
    }

    return () => {
      if (matchMedia.removeListener) {
        matchMedia.removeListener(handleChange)
      } else {
        matchMedia.removeEventListener('change', handleChange)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query])

  return matches
}

export default useMediaQuery

export default function WebVitalsReporter({...}) {
  ...
  
  useMount(() => {
    const {
      deviceMemory,
      connection: {effectiveType} = {},
      hardwareConcurrency
    } = window.navigator || {}
    
    const handleAllChanges = ({attribution, name, rating, value}) => {
      ...

      logger.cwv({
        ...
        ...(deviceMemory && {deviceMemory}),
        ...(effectiveType && {effectiveType}),
        ...(hardwareConcurrency && {hardwareConcurrency})
      })
    }
  }
  
}

// In the browser
const isSaveDataEnabled = () => {
  return navigator.connection?.saveData ?? false;
};

// Use Case
if (isSaveDataEnabled()) {
  // Load light component
  await import('./LightweightComponent');
} else {
  // Load default component
  await import('./FullComponent');
}

import { useNetworkStatus } from 'react-adaptive-hooks/network';
import { useSaveData } from 'react-adaptive-hooks/save-data';
import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';
import { useMemoryStatus } from 'react-adaptive-hooks/memory';
import { useMediaCapabilitiesDecodingInfo } from 'react-adaptive-hooks/media-capabilities';

import type { EffectiveConnectionType } from '@sbt-web/hooks';

interface Hooks {
  saveData?: boolean | null;
  effectiveConnectionType?: EffectiveConnectionType | null;
  deviceMemory?: number | null;
}

const shouldReduceDataUse = ({
  saveData = null,
  effectiveConnectionType = null,
  deviceMemory = null,
}: Hooks): boolean => {
  const saveDataSignal = saveData ?? false;
  const ectSignal = effectiveConnectionType ?? '4g';
  const deviceMemorySignal = deviceMemory ?? Infinity;

  return saveDataSignal || ectSignal !== '4g' || deviceMemorySignal <= 2;
};

export default shouldReduceDataUse;

import VueAdaptiveNetwork from 'vue-adaptive-components/network';
import VueAdaptiveSaveData from 'vue-adaptive-components/save-data';
import VueAdaptiveMemory from 'vue-adaptive-components/hardware-concurrency';
import VueAdaptiveHardwareConcurrency from 'vue-adaptive-components/memory';

<script src="script.js">
  
<script async src="script.js">

<script defer src="script.js">
  
<script type="module" src="module.mjs">

<script async
        defer
        src="script.js">
  

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>