- [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

- [Context Code](#context-code)
- [Usage](#usage)

----

## Context Code
The context is used to store the previous path. This is done by watching the routing path (`router.asPath` for NextJS) and updating the context state when it changes. It is initialized to `undefined` and the current path is stored in a mutable ref so that it can be stored when the path changes.

> File: `src/contexts/RoutingContext.tsx`
```tsx
import { useRouter } from 'next/router';
import React, { ReactNode, useEffect, useRef, useState } from 'react';

export type RoutingContextState = {
  previousPath?: string;
};

export const DEFAULT_ROUTING_CONTEXT_VALUE: RoutingContextState = {
  previousPath: undefined,
};

export const RoutingContext = React.createContext(
  DEFAULT_ROUTING_CONTEXT_VALUE,
);

export type RoutingContextWrapperProps = {
  children: ReactNode;
};

export const RoutingContextWrapper = ({
  children,
}: RoutingContextWrapperProps) => {
  const router = useRouter();

  const [previousPath, setPreviousPath] = useState<string>();
  const currentPath = useRef<string>();

  useEffect(() => {
    setPreviousPath(currentPath.current);
    currentPath.current = router.asPath;
  }, [router.asPath]);

  return (
    <RoutingContext.Provider
      value={{
        previousPath,
      }}
    >
      {children}
    </RoutingContext.Provider>
  );
};

export default RoutingContext;
```

## Usage

First wrap your app/page with the context. In NextJS this is done in `pages/_app.tsx`:
```tsx
...

function AppName<P>({ Component, pageProps }: AppNameProps<P>) {
  return (
    <RoutingContextWrapper>
      <Head>
        <title>{APP_NAME}</title>
      </Head>
      <Component {...pageProps} />
    </RoutingContextWrapper>
  );
}

...
```

Then, where ever the previous path is needed, it can be retreived from the context:

```typescript
const { previousPath } = useContext(RoutingContext);
```




Tracking the Previous Page using React Context


- [Quick Notes](#quick-notes)
- [Examples](#examples)
  - [Set the initial Mode](#set-the-initial-mode)
  - [Toggling the Mode](#toggling-the-mode)
  - [Hook Tracking the Mode in state using a `MutationObserver`](#hook-tracking-the-mode-in-state-using-a-mutationobserver)
  - [Applying Styles Using CSS Variables](#applying-styles-using-css-variables)
  - [Applying Styles Directly in CSS/SCSS Modules](#applying-styles-directly-in-cssscss-modules)
- [References](#references)

----

## Quick Notes
- Use global class to indicate when dark mode is enabled
- For SPAs, the global class can be applied at the root component level
- For NextJS, set the global class on the body in the `_document.tsx`
- When using [styled components](https://styled-components.com/), leverage the `ThemeProvider`
- Set the default dark/light mode based on the `prefers-color-scheme` media query to honor user's preference
  - See related: [Using Users' Preferences for Dark Mode](/posts/detecting-dark-mode)
- When the mode is changed, store the user's selection in [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)


## Examples
### Set the initial Mode
```typescript
// Constants for the dark mode CSS class and local storage key
export const DARK_MODE_CLASS = 'dark_mode';
export const DARK_MODE_STORAGE_KEY = 'dark_mode';
```

```typescript
if (
  localStorage?.getItem(DARK_MODE_STORAGE_KEY}) ??
  window.matchMedia('(prefers-color-scheme: dark)').matches
) {
  document.body.classList.add(DARK_MODE_CLASS);
}
```

To ensure this happens as early as possible in NextJS:
> File: `_document.tsx`
```tsx
class CustomDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
          <Script id="dark_mode_init" strategy="afterInteractive">
            {`
            if (
              localStorage?.getItem('${DARK_MODE_STORAGE_KEY}') ??
              window.matchMedia('(prefers-color-scheme: dark)').matches
            ) {
              document.body.classList.add('${DARK_MODE_CLASS}');
            }
            `}
          </Script>
        </body>
      </Html>
    );
  }
}
```

### Toggling the Mode
```typescript
// Constants for the dark mode CSS class and local storage key
export const DARK_MODE_CLASS = 'dark_mode';
export const DARK_MODE_STORAGE_KEY = 'dark_mode';
```

```typescript
export function toggleDarkMode() {
  if (document.body.classList.contains(DARK_MODE_CLASS)) {
    document.body.classList.remove(DARK_MODE_CLASS);
    localStorage?.setItem(DARK_MODE_STORAGE_KEY, '');
  } else {
    document.body.classList.add(DARK_MODE_CLASS);
    localStorage?.setItem(DARK_MODE_STORAGE_KEY, 'true');
  }
}
```

### Hook Tracking the Mode in state using a `MutationObserver`
```typescript
export default function useIsDarkMode() {
  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);

  useEffect(() => {
    const observer = new MutationObserver(() => {
      setIsDarkMode(document.body.classList.contains(DARK_MODE_CLASS));
    });
    observer.observe(document.body, {
      attributes: true,
      attributeFilter: ['class'],
      characterData: false,
      childList: false,
      subtree: false,
    });

    // Set the initial value
    // For NextJS this has to be done within the effect since
    // it must be run client side - for SSR projects it can be done
    // in the state initialization
    setIsDarkMode(document.body.classList.contains(DARK_MODE_CLASS));

    return () => {
      observer.disconnect();
    };
  }, []);

  return isDarkMode;
}
```

### Applying Styles Using CSS Variables
```css
body {
  --background-color: #ffffff;
  --text-color: #000000;

  /**
   * The variables can be used anywhere below body
   * (even in components using css modules)
   */
  color: var(--text-color);
  background-color: var(--background-color);
}

body.dark_mode {
  --background-color: #000000;
  --text-color: #ffffff;
}
```

### Applying Styles Directly in CSS/SCSS Modules
```css
.my_component {
  // Light mode styles
  background-color: #ffffff;
  color: #000000;
}

:global(body.dark_mode) {
  .my_component {
    /** Dark mode styles */
    background-color: #ffffff;
    color: #000000;
  }
}
```

## References
-  [MDN Docs - Using CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-  [NextJS Docs - Scripts: `afterInteractive`](https://nextjs.org/docs/basic-features/script#afterinteractive)
-  [styled components Docs - Theming](https://styled-components.com/docs/advanced)

Posts tagged "react hook"

Monitor for Resize in JavaScript

Tracking the Previous Page using React Context

Dark Mode Toggle in React