
# [[TypeScript]] [[React]] forwardRef

Create a component where you can pass a ref.

```ts
const MyComponent = React.forwardRef<HTMLDivElement, Props>(
  (props, ref) =>
    <div ref={ref} {...props} />
);
```

TypeScript React forwardRef

forwardref


Sometimes I run into issues with NextJS's Fast Refresh. This pages documents some fixes to them.

### Performing full page refresh

Naming page components the same as another page can cause a full reload. Make sure the page name is unique.

Higher order components can cause issues with fast refresh for this reason as well. Honestly I've found it best to avoid them.




tags: [[react]]

NextJS Fast Refresh

nextjs fash refresh


# React Charting Libraries

Comparison of various charting libraries for the [[web]] (focused on [[React]]).

## visx

[github.com/airbnb/visx](https://github.com/airbnb/visx)

> Collection of expressive, low-level visualization primitives for React

- Based on D3
- Modular (small size)
- Low level. Allows you to create your own chart library on top of it
- No animation built in. But there are examples using react-move and react-spring

## Recharts

[recharts.org](http://recharts.org)

> Composable charting library build on React components

- Built on SVG and D3
- Fairly well used
- A lot of possible customization

## Frappe

[frappe.io/charts](https://frappe.io/charts)

> GitHub-inspired simple and modern SVG charts for the web with zero dependencies

- Simple
- Not declarative or React based

## Victory

[formidable.com/open-source/victory/](https://formidable.com/open-source/victory/)

> React.js components for modular charting and data visualization

- Robust
- Flexible
- Decent guides

## nivo

[nivo.rocks](https://nivo.rocks/)

> Rich set of dataviz components, built on top of d3 and React

- D3 and React based
- Supports server side rendering
- Animation built in
- Less customization and more plug and play

React Charting Libraries

react charting libraries


# Stack Components using Twin.macro

I like to use [[tailwind-react-composition|Tailwind via twin.macro]] for styling. These are a `VStack` and `HStack` components that can be used to layout UI in [[React]].

```ts
<HStack space={4}>
  <div tw="bg-blue-500 w-20 h-20" />
  <div tw="bg-blue-500 w-20 h-20" />
  <div tw="bg-blue-500 w-20 h-20" />
</HStack>
```

## Implementation

twin.macro runs at build time so we need to define all possible styles upfront. This gives us ability to space between 0 and 16 in horizontal and vertical directions.

```ts
import tw, { TwStyle } from "twin.macro";

export interface StackProps {
  justify?: JustifyValues;
  align?: AlignValues;
  space?: StackSpace;
  className?: string;
}

type JustifyValues = "center" | "between" | "start" | "end";
type AlignValues = "center" | "start" | "end" | "baseline";

const justifyValues: Record<JustifyValues, TwStyle> = {
  center: tw`justify-center`,
  between: tw`justify-between`,
  start: tw`justify-start`,
  end: tw`justify-end`,
};

const alignValues: Record<AlignValues, TwStyle> = {
  center: tw`items-center`,
  baseline: tw`items-baseline`,
  start: tw`items-start`,
  end: tw`items-end`,
};

type StackSpace = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16;

const vSpaces: Record<StackSpace, TwStyle> = {
  0: tw`space-y-0`,
  1: tw`space-y-1`,
  2: tw`space-y-2`,
  3: tw`space-y-3`,
  4: tw`space-y-4`,
  5: tw`space-y-5`,
  6: tw`space-y-6`,
  7: tw`space-y-7`,
  8: tw`space-y-8`,
  9: tw`space-y-8`,
  10: tw`space-y-8`,
  12: tw`space-y-12`,
  14: tw`space-y-14`,
  16: tw`space-y-16`,
};

const hSpaces: Record<StackSpace, TwStyle> = {
  0: tw`space-x-0`,
  1: tw`space-x-1`,
  2: tw`space-x-2`,
  3: tw`space-x-3`,
  4: tw`space-x-4`,
  5: tw`space-x-5`,
  6: tw`space-x-6`,
  7: tw`space-x-7`,
  8: tw`space-x-8`,
  9: tw`space-x-8`,
  10: tw`space-x-8`,
  12: tw`space-x-12`,
  14: tw`space-x-14`,
  16: tw`space-x-16`,
};

const BaseStack: React.FC<StackProps & { dir: "vertical" | "horizontal" }> = ({
  dir,
  justify,
  align,
  space,
  ...props
}) => (
  <div
    {...props}
    css={[
      dir === "vertical" ? tw`flex flex-col` : tw`flex`,
      dir === "vertical" ? vSpaces[space ?? 0] : hSpaces[space ?? 0],
      justify != null && justifyValues[justify],
      align != null && alignValues[align],
    ]}
  />
);

export const HStack: React.FC<StackProps> = props => (
  <BaseStack {...props} dir="horizontal" />
);

export const VStack: React.FC<StackProps> = props => (
  <BaseStack {...props} dir="vertical" />
);

```

tags: [[web]]

Stack Components using Twin.macro

twin-stacks


# useCopy

[[React]] hook to copy text and show a "copied" message for a short time.

## Implementation

```ts
import { useRef, useState } from "react";
import copy from "copy-to-clipboard";

export const useCopy = (): [boolean, (text: string) => void] => {
  const [showCopied, setShowCopied] = useState(false);
  const timeoutRef = useRef<any>(null);

  const copyText = (text: string) => {
    copy(text);
    setShowCopied(true);

    if (timeoutRef.current != null) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = setTimeout(() => {
      setShowCopied(false);
      timeoutRef.current = null;
    }, 1500);
  };

  return [showCopied, copyText];
};
```

## Usage

```ts
const MyComponent = () => {
  const [copied, copy] = useCopy();
  
  return (
    <button onClick={() => copy("some text")}>
        {copied ? "copied!" : "copy text"}
    </button>
  )
}
```

useCopy

usecopy


# useDraggable

[[React]] hook to perform an action when an element is dragged.

## Implementation

```ts
import React, { useState, useEffect, useRef } from "react";

export type Pos = { x: number; y: number };

export const useDraggable = (
  ref: React.MutableRefObject<HTMLDivElement | null>,
  {
    onDrag,
    onDragEnd,
  }: { onDrag: (delta: Pos) => void; onDragEnd?: (delta: Pos) => void },
): {
  isDragging: boolean;
} => {
  const [isDragging, setIsDragging] = useState(false);

  const draggingStart = useRef<Pos | null>(null);
  const mousePos = useRef<Pos | null>(null);

  const getDelta = (): Pos | null =>
    mousePos.current != null && draggingStart.current != null
      ? {
          x: mousePos.current.x - draggingStart.current.x,
          y: mousePos.current.y - draggingStart.current.y,
        }
      : null;

  useEffect(() => {
    const mouseUpListener = () => {
      setIsDragging(false);

      const delta = getDelta();
      if (onDragEnd != null && delta != null) {
        onDragEnd(delta);
      }

      draggingStart.current = null;
      mousePos.current = null;
    };

    window.addEventListener("mouseup", mouseUpListener);
    return () => window.removeEventListener("mouseup", mouseUpListener);
  }, [onDragEnd]);

  useEffect(() => {
    const mouseDownListener = (e: MouseEvent) => {
      draggingStart.current = { x: e.clientX, y: e.clientY };
      setIsDragging(true);
    };

    // Attach event listener to ref after short timeout so we can ensure it is mounted
    // this is a hack to get around the ref in effect problem
    //   -> https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
    // We can't use a callback ref because we need to remove the event listener when unmounted
    setTimeout(() => {
      ref.current?.addEventListener("mousedown", mouseDownListener);
    }, 1);
    return () =>
      ref.current?.removeEventListener("mousedown", mouseDownListener);
  }, [ref.current]);

  useEffect(() => {
    if (!isDragging) {
      return;
    }

    const mouseMoveListener = (e: MouseEvent) => {
      mousePos.current = { x: e.clientX, y: e.clientY };

      const delta = getDelta();
      if (delta != null) {
        onDrag(delta);
      }
    };

    window.addEventListener("mousemove", mouseMoveListener);
    return () => window.removeEventListener("mousemove", mouseMoveListener);
  }, [isDragging, onDrag]);

  return {
    isDragging,
  };
};

export const useDraggingCursor = (isDragging: boolean, cursor: string) => {
  useEffect(() => {
    if (!isDragging) {
      document.body.style.cursor = "";
      return;
    }

    document.body.style.cursor = cursor;
  }, [isDragging]);
};
```

usedraggable


# useFavicon

Change your favicon when [[React]] components are mounted. 

You can generate favicons from images with [[favocon]].

## Implementation

```ts
import { useEffect } from "react";

export const favicons = {
  sparkles: "/favicon.ico",
  garden: "/seedling.ico",
  bookmark: "/bookmark.ico",
  rocket: "/rocket.ico",
};

export const useFavicon = (name: keyof typeof favicons) => {
  useEffect(() => {
    const href = favicons[name];

    const link: HTMLLinkElement =
      document.querySelector("link[rel*='icon']") ||
      document.createElement("link");

    link.type = "image/x-icon";
    link.rel = "shortcut icon";
    link.href = href;

    document.getElementsByTagName("head")[0].appendChild(link);
  }, [name]);
};
```

## Usage

```ts
const MyComponent = () => {
  useFavicon("sparkles");
  return ( /* ... */ );
}
```


useFavicon

usefavicon


# useIsMounted

## Implementation

Check if a [[React]] component is mounted

```ts
export const useIsMounted = (): boolean => {
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    setIsMounted(true);

    return () => setIsMounted(false);
  }, []);

  return isMounted;
};
```

## Usage

Don't render anything when not mounted (e.g. on the server in SSG).

```ts
const MyComponent = () => {
  const isMounted = useIsMounted();
  
  if (!isMounted) {
    return null;
  }
  
  return (/* ... */ );
}
```

useismounted


# useMediaQuery

Watch the result of a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) with a [[React]] hook.

```ts
import { useEffect, useState } from "react";

export const useMediaQuery = (query: string): boolean => {
  const mediaQuery = window.matchMedia(query);

  const [value, setValue] = useState(mediaQuery.matches);
  useEffect(() => {
    const handler = () => {
      setValue(mediaQuery.matches);
    };

    mediaQuery.addListener(handler);
    return () => mediaQuery.removeListener(handler);
  }, []);

  return value;
};
```

## Usage

```ts
const MyComponent = () => {
  const isSmall = useMediaQuery(`(max-width: 40em)`);

  return <div>{isSmall ? "Small device" : "large device"}</div>;
};
```


usemediaquery


# useRefState

Access a [[react]] state value through a ref.

## Implementation

```ts
import { MutableRefObject, useRef, useState } from "react";

export const useRefState = <T>(
  initialState: T,
): [T, (newValue: T) => void, MutableRefObject<T>] => {
  const [value, _setValue] = useState<T>(initialState);
  const ref = useRef<T>(initialState);

  const setValue = (newValue: T) => {
    ref.current = newValue;
    _setValue(newValue);
  };

  return [value, setValue, ref];
};
```

## Usage

```ts
const MyComponent = () => {
  const [value, setValue, ref] = useRefState(0);
  
  // Print `value` every 1 second
  useEffect(() => {
    const interval = setInterval(() => {
      console.log(ref.current)
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <button onClick={() => setValue(value + 1)}>{value}</div>
  )
}
```

userefstate


# useScript

Dynamically load an external script and know when its loaded.

Original hook from [usehooks.com](https://usehooks.com/useScript).

```js
import { useEffect, useState } from "react";

export type Status = "idle" | "loading" | "ready" | "error";

export const useScript = (src: string, enabled = true): Status => {
  // Keep track of script status ("idle", "loading", "ready", "error")
  const [status, setStatus] = useState<Status>(src ? "loading" : "idle");

  useEffect(
    () => {
      // Allow falsy src value if waiting on other data needed for
      // constructing the script URL passed to this hook.
      if (!src || !enabled) {
        setStatus("idle");
        return;
      }

      // Fetch existing script element by src
      // It may have been added by another intance of this hook
      let script: HTMLScriptElement | null = document.querySelector(
        `script[src="${src}"]`,
      );

      if (!script) {
        // Create script
        script = document.createElement("script");
        script.src = src;
        script.async = true;
        script.setAttribute("data-status", "loading");

        // Add script to document body
        document.body.appendChild(script);

        // Store status in attribute on script
        // This can be read by other instances of this hook

        const setAttributeFromEvent = event => {
          script?.setAttribute(
            "data-status",
            event.type === "load" ? "ready" : "error",
          );
        };

        script.addEventListener("load", setAttributeFromEvent);
        script.addEventListener("error", setAttributeFromEvent);
      } else {
        // Grab existing script status from attribute and set to state.
        setStatus(script.getAttribute("data-status") as Status);
      }

      // Script event handler to update status in state
      // Note: Even if the script already exists we still need to add
      // event handlers to update the state for *this* hook instance.
      const setStateFromEvent = event => {
        setStatus(event.type === "load" ? "ready" : "error");
      };

      // Add event listeners
      script.addEventListener("load", setStateFromEvent);
      script.addEventListener("error", setStateFromEvent);

      // Remove event listeners on cleanup
      return () => {
        if (script) {
          script.removeEventListener("load", setStateFromEvent);
          script.removeEventListener("error", setStateFromEvent);
        }
      };
    },

    [src, enabled], // Only re-run effect if script src changes
  );

  return status;
};
```

## Usage

```ts
const scriptStatus = useScript("https://myscript.js");
```

tags: [[react]]