Tim-W-James

type ConditionalWrapperProps = {
  /**
   * Inner component to be wrapped.
   */
  children: React.ReactElement;
  /**
   * Condition to be met for the wrapper to be applied.
   */
  condition: boolean;
  /**

Tim-W-James

const useOnlineStatus = () => {
  const [online, setOnline] = useState(navigator.onLine);

  useEventListener("online", () => setOnline(navigator.onLine));
  useEventListener("offline", () => setOnline(navigator.onLine));

  return online;
};

Tim-W-James

const usePrevious = <T>(value: T): T => {
  // The ref object is a generic container whose current property is mutable ...
  // ... and can hold any value, similar to an instance property on a class
  const ref: any = useRef<T>();

  // Store current value in ref
  useEffect(() => {
    ref.current = value;
  }, [value]); // Only re-run if value changes

Tim-W-James

const useLockBodyScroll = (): void => {
  // useLaoutEffect callback return type is "() => void" type
  useLayoutEffect((): (() => void) => {
    // Get original body overflow
    const originalStyle: string = window.getComputedStyle(
      document.body
    ).overflow;
    // Prevent scrolling on mount
    document.body.style.overflow = "hidden";
    // Re-enable scrolling when component unmounts

Tim-W-James

import { RefObject, useEffect, useState } from "react";

const useIntersectionObserver = (
  ref: RefObject<Element>,
  rootMargin = "0px"
): boolean => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const current = ref.current;

Tim-W-James

/**
 * Lazy load a module with a named export
 *
 * @param {string} path - path for the import
 * @param {string} namedExport - named exported member of the module
 */
const lazyLoad = (path: string, namedExport: string) =>
  lazy(() =>
    namedExport
      ? import(path).then((module) => ({ default: module[namedExport] }))

Tim-W-James

// Adapted from: https://usehooks.com/useLocalStorage/

/**
 * Get and set a value in browser local storage
 *
 * @param {string} key - key for the data
 * @param {T} initialValue - initial data value
 */
const useLocalStorage = <T>(key: string, initialValue: T) => {
  // State to store our value

Tim-W-James

import { useEffect } from "react";

/**
 * Set the document meta attributes
 *
 * @param {string} title - meta title
 * @param {string} description - meta description
 */
const useDocumentMeta = (
  title?: string,

Tim-W-James

const x = {
  ...( condition && { key: value })
}

Tim-W-James

new URLSearchParams({
  key: "value"
})