librz

// why this won't work:
// 1. ref is scoped to component
// 2. there's no way to know whether the window is already opened


import { useMemo, useRef } from "react";

export type WindowConfig = {
  /** window path */
  path: string;

librz

export const fruitOptions = [
  {
    value: "apple",
    label: "Apple 🍎",
  },
  {
    value: "grape",
    label: "Grape 🍇",
  },
  {

librz

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  const response = await fetch(form.action, {
    method: form.method,
    body: formData
  });
  // handle response...
});

librz

import { PauseIcon, PlayIcon } from "Todo";
import { Button } from "Todo";
import * as Slider from "@radix-ui/react-slider";
import classNames from "classnames";
import throttle from "lodash.throttle";
import {
  useCallback,
  useEffect,
  useRef,
  useState,

librz

import { useQuery } from "@tanstack/react-query";
import { useRef, useState } from "react";

async function fetchVideoContentLength(videoUrl: string) {
  const controller = new AbortController();
  const signal = controller.signal;
  try {
    const response = await fetch(videoUrl, {
      // the idiomatic way of requesting only the response headers(without the content) is using a HEAD request, but server may not support the HEAD method
      method: "GET",

librz

export function getErrorMessage(err: unknown, defaultMessage = "An error occurred") {
  if (err instanceof Error && err.message) {
    return err.message;
  }
  if (err instanceof Object && "message" in err && typeof err.message === "string" && err.message) {
    return err.message;
  }
  if (typeof err === "string" && err) {
    return err;
  }

librz

In TypeScript, u can easily declare constants using as const:

const Meal = {
  Breakfast: 'breakfast',
  Lunch: 'lunch',
  Dinner: 'dinner'
}

librz

import { useState } from "react";
import { useBeforeUnload, useBlocker } from "react-router-dom";

// unstable_usePrompt: https://reactrouter.com/en/main/hooks/use-prompt
// useBlocker: https://reactrouter.com/en/main/hooks/use-blocker
// useBeforeUnload: https://reactrouter.com/en/main/hooks/use-before-unload

export default function Form() {
  const [input, setInput] = useState("");

librz

/**
 * 以下代码来自 react-router-dom v6，用于解决 react-router-dom v5 没有 useSearchParams 的问题
 * see: https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/index.tsx#L1432
 * 在原代码的基础上做的改动:
 * 1. 原代码使用了 useNavigate，但 react-router v5 还没有这个 hook，使用 useHistory 代替(https://reactrouter.com/en/main/upgrading/v5#use-usenavigate-instead-of-usehistory)
 * 2. 在返回的数组中提供 updateSearchParams 以在保留其他参数的情况下设置/更新指定的参数
 */

import React, { useCallback } from 'react';
import { useLocation, useHistory } from 'react-router';

librz

const list = [
  { province: '天津', city: '南开', district: '三马路' },
  {
    province: '天津',
    city: '南开',
    district: '四马路'
  },
  {
    province: '天津',
    city: '河西',