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";

type UseCookieReturnType = {
  cookie: string | undefined;
  setCookie: (value: string, days?: number) => void;
};

const useCookie = (cookieName: string): UseCookieReturnType => {
  const getCookie = (name: string): string | undefined => {
    const value = `; ${document.cookie}`;

KristofferEriksson

import { useEffect, useState } from "react";

function useLocalStorage() {
  const [loadingStates, setLoadingStates] = useState<Map<string, boolean>>(
    new Map()
  );

  const setStorageValue = <T>(key: string, value: T) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));

KristofferEriksson

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

/**
 * Custom React hook for double-click confirmation for critical actions.
 *
 * @param action - The action to be executed on the second click.
 * @param timeout - Time in milliseconds to reset the unlocked state.
 * @returns The current unlocked state and the trigger function.
 */
const useConfirmation = (action: () => void, timeout: number = 5000) => {

KristofferEriksson

import { useCallback, useState } from "react";

// Custom hook to copy text to clipboard
const useCopyToClipboard = (timeoutDuration: number = 1000) => {
  const [copied, setCopied] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  const copyToClipboard = useCallback(
    async (text: string) => {
      try {

KristofferEriksson

/**
 * Custom hook for dynamically resizing a textarea to fit its content.
 * @param {React.RefObject<HTMLTextAreaElement>} textareaRef - Reference to the textarea element.
 * @param {string} textContent - Current text content of the textarea.
 * @param {number} maxHeight - Optional: maxHeight of the textarea in pixels.
 */

import { useEffect } from "react";
const useDynamicTextareaSize = (
  textareaRef: React.RefObject<HTMLTextAreaElement>,

ikibalnyi

import * as React from 'react'

const NonceContext = React.createContext<string | undefined>(undefined)
export const NonceProvider = NonceContext.Provider
export const useNonce = () => React.useContext(NonceContext)

RobertAKARobin

Safari's date-picker is the cause of 1/3 of our customer support issues

...and obviously we're building a workaround. But I'm absolutely flabbergasted that a standard <input type="date"> HTML field, in a standard browser, from a company that bases its reputation good design, could be so dreadful.

The context

I'm the developer for a startup that sells a genetic test to recommend medications for high blood pressure. For medical reasons we need to know our customers' birth date. Most of our customers are in their 60s or older. We've found that many of them use iPads or iPhones. And they're the ones who complain to our customer support that our site is unusable.

The problem

pesterhazy

So you want to write a sync system for a web app with offline and realtime support? Good luck. You might find the following resources useful.

Overview articles

• Database in a browser, a spec (Stepan Parunashvili)

  What problem are we trying to solve with a sync system?

• The web of tomorrow (Nikita Prokopov)

ryanflorence

// TODO: make `pages` optional and measure the div when unspecified, this will
// allow more normal document flow and make it easier to do both mobile and
// desktop.
import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,