OrionReed

// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
  const SHOW_SIDES = false; // color sides of DOM nodes?
  const COLOR_SURFACE = true; // color tops of DOM nodes?
  const COLOR_RANDOM = false; // randomise color?
  const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
  const MAX_ROTATION = 180; // set to 360 to rotate all the way round
  const THICKNESS = 20; // thickness of layers
  const DISTANCE = 10000; // ¯\\_(ツ)_/¯

KristofferEriksson

import { useEffect, useState } from "react";

interface LocationOptions {
  enableHighAccuracy?: boolean;
  timeout?: number;
  maximumAge?: number;
}

interface LocationState {
  coords: {

KristofferEriksson

import { useEffect, useState } from "react";

type UseTextSelectionReturn = {
  text: string;
  rects: DOMRect[];
  ranges: Range[];
  selection: Selection | null;
};

const getRangesFromSelection = (selection: Selection): Range[] => {

KristofferEriksson

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

// Types for the useShare hook parameters
interface UseShareParams {
  onShare?: (content: ShareParams) => void;
  onSuccess?: (content: ShareParams) => void;
  onError?: (error: any) => void;
  fallback?: () => void;
  successTimeout?: number;
}

KristofferEriksson

import { useEffect, useRef } from "react";

type GestureType =
  | "swipeUp"
  | "swipeDown"
  | "swipeLeft"
  | "swipeRight"
  | "tap"
  | "pinch"
  | "zoom";

KristofferEriksson

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

// Define custom types for SpeechRecognition and SpeechRecognitionEvent
interface ISpeechRecognitionEvent extends Event {
  results: SpeechRecognitionResultList;
  resultIndex: number;
}

interface ISpeechRecognition extends EventTarget {
  lang: string;

KristofferEriksson

import { useCallback, useEffect, useRef, useState } from "react";

interface UseBroadcastChannelOptions {
  name: string;
  onMessage?: (event: MessageEvent) => void;
  onMessageError?: (event: MessageEvent) => void;
}

interface UseBroadcastChannelReturn<D, P> {
  isSupported: boolean;

KristofferEriksson

import { useEffect, useState } from "react";
import resolveConfig from "tailwindcss/resolveConfig";

// Update the path to your Tailwind config file
import tailwindConfig from "tailwind.config";

const useTailwindBreakpoint = ({
  onBreakpointChange,
}: {
  // eslint-disable-next-line no-unused-vars

KristofferEriksson

import { useCallback, useEffect, useRef, useState } from "react";

interface UseUndoHook<T> {
  value: T;
  onChange: (newValue: T) => void;
  undo: () => void;
  redo: () => void;
  clear: () => void;
  canUndo: boolean;
  canRedo: boolean;

KristofferEriksson

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

type FetchState<T> = {
  data: T | null;
  isLoading: boolean;
  error: Error | null;
  isCached: boolean;
  refetch: () => void;
};