- [Window Size Changes](#window-size-changes)
- [Watching a Specific Element for Size Changes](#watching-a-specific-element-for-size-changes)
- [React Hook](#react-hook)
- [References](#references)

----

## Window Size Changes
If it your logic based off of the window size and not specific element sizing, an event listener can be added to the window for the `resize` event with:
```typescript
const callback = (evt: UIEvent) => console.log(evt);
window.addEventListener('resize', callback);
```

When done, be sure to remove the event listener with:
```typescript
window.removeEventListener('resize', callback);
```

## Watching a Specific Element for Size Changes
For cases where a specific element's size needs to be known, a `ResizeObserver` can be used. This is helpful for when the window doesn't resize but a element's size does (e.g. reflow due to content being added or removed).

To watch an element, the following can be used:
```typescript
const testDiv = document.getElementById('test');
const callback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => console.log(entries);
const resizeObserver = new ResizeObserver(callback);
resizeObserver.observe(testDiv);
```

When done watching an element, it can be unobserved using:

```typescript
// Only stop watching a single element
resizeObserver.unobserve(testDiv);

// Or Alternatively, all elements can be unobserved using:
resizeObserver.disconnect();
```

## React Hook
This hook is a general purpose resize hook. It can be used to track the resizing of a specific element or when the window itself is resized.

If `elementToWatch` isn't passed, the whole window will be watched for resize events.

```typescript
import { useEffect } from 'react';

/**
 * Hookup a resize listener to the window or a target element
 * @param {() => void} callback The callback to call on resize (should be memoized with `useCallback` to avoid re-registering each render)
 * @param {boolean} callOnMount Whether to trigger the callback on mount
 * @param {HTMLElement | undefined} elementToWatch The element to watch for size changes
 */
export default function useOnResize(
  callback: () => void,
  callOnMount: boolean = false,
  elementToWatch?: HTMLElement,
) {
  useEffect(() => {
    // Watch a particular element if specified
    if (elementToWatch) {
      const resizeObserver = new ResizeObserver(callback);
      resizeObserver.observe(elementToWatch);
      if (callOnMount) {
        callback();
      }

      return () => {
        resizeObserver.disconnect();
      };
    }

    // If no element is specified, watch for window size changes
    window.addEventListener('resize', callback);
    if (callOnMount) {
      callback();
    }
    return () => {
      window.removeEventListener('resize', callback);
    };
  }, [callback, callOnMount, elementToWatch]);
}

```


## References
- [[MDN] ResizeObserver
](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- [[MDN] Window: resize event
](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event)



Monitor for Resize in JavaScript


- [CSS Media Query](#css-media-query)
- [JavaScript - One time check](#javascript---one-time-check)
- [JavaScript / TypeScript - Watch for color scheme preference change](#javascript--typescript---watch-for-color-scheme-preference-change)
- [React Hook](#react-hook)
- [References](#references)

----


Dark mode is available and used pretty much everywhere now. Most operating systems allow users to set their preference between light and dark mode and this can be detected in the browser.

The following are notes on how to detect users' preferences in CSS and JavaScript / TypeScript.

## CSS Media Query

For CSS, all that is required is to write your styles by default in light mode and then wrap your dark mode changes in the `@media (prefers-color-scheme: dark)` media query (Note: you can also write your styles for dark mode by default and change the query to match `light` instead to do the inverse).
```css
/** Default for light mode */
body {
  background-color: #1f1f1f;
  color: #efefef;
}

@media (prefers-color-scheme: dark) {
  /** Make background dark and text light in dark mode */
  body {
    background-color: #1f1f1f;
    color: #efefef;
  }
}
```

## JavaScript - One time check
```js
if (
  window.matchMedia &&
  window.matchMedia('(prefers-color-scheme: dark)').matches
) {
  // Dark mode
} else {
  // Light mode
}
```

## JavaScript / TypeScript - Watch for color scheme preference change
```typescript
window.matchMedia &&
window
  .matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (evt: MediaQueryListEvent) => {
    // This event fires whenever the client changes their preferred color scheme
    if (evt.matches) {
      // Dark Mode
    } else {
      // Light mode
    }
  });
```

## React Hook
**[Example on CodeSandbox](https://codesandbox.io/s/dark-mode-react-hook-3nijjf)**
>File: `usePrefersDarkMode.ts`
```typescript
import { useEffect, useState } from "react";

export default function usePrefersDarkMode() {
  const [prefersDarkMode, setPrefersDarkMode] = useState<boolean>(
    window.matchMedia("(prefers-color-scheme: dark)").matches
  );

  useEffect(() => {
    const onPreferenceChange = (evt: MediaQueryListEvent) => {
      setPrefersDarkMode(evt.matches);
    };
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", onPreferenceChange);

    return () => {
      // Remove listener on unmount
      mediaQuery.removeEventListener("change", onPreferenceChange);
    };
  }, []);

  return prefersDarkMode;
}
```


## References

- [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)

Posts tagged "javascript"

Monitor for Resize in JavaScript

Using Users' Preferences for Dark Mode