Merge branch 'main' into experimental

Author: tylermcginnis

index.d.ts

@@ -123,10 +123,7 @@ declare module "@uidotdev/usehooks" {
   ): React.MutableRefObject<T>;
 
   export function useCopyToClipboard(): [
-    {
-      error: Error | null;
-      text: string | null;
-    },
+    string | null,
     (value: string) => Promise<void>
   ];
 

index.js

@@ -133,35 +133,34 @@ export function useClickAway(cb) {
   return ref;
 }
 
-export function useCopyToClipboard() {
-  const [state, setState] = React.useState({
-    error: null,
-    text: null,
-  });
-
-  const copyToClipboard = React.useCallback(async (value) => {
-    if (!navigator?.clipboard) {
-      return setState({
-        error: new Error("Clipboard not supported"),
-        text: null,
-      });
-    }
+function oldSchoolCopy(text) {
+  const tempTextArea = document.createElement("textarea");
+  tempTextArea.value = text;
+  document.body.appendChild(tempTextArea);
+  tempTextArea.select();
+  document.execCommand("copy");
+  document.body.removeChild(tempTextArea);
+}
 
-    const handleSuccess = () => {
-      setState({
-        error: null,
-        text: value,
-      });
-    };
+export function useCopyToClipboard() {
+  const [state, setState] = React.useState(null);
 
-    const handleFailure = (e) => {
-      setState({
-        error: e,
-        text: null,
-      });
+  const copyToClipboard = React.useCallback((value) => {
+    const handleCopy = async () => {
+      try {
+        if (navigator?.clipboard?.writeText) {
+          await navigator.clipboard.writeText(value);
+          setState(value);
+        } else {
+          throw new Error("writeText not supported");
+        }
+      } catch (e) {
+        oldSchoolCopy(value);
+        setState(value);
+      }
     };
 
-    navigator.clipboard.writeText(value).then(handleSuccess, handleFailure);
+    handleCopy();
   }, []);
 
   return [state, copyToClipboard];
@@ -493,38 +492,38 @@ const initialUseHistoryStateState = {
 
 const useHistoryStateReducer = (state, action) => {
   const { past, present, future } = state;
-  switch (action.type) {
-    case "UNDO":
-      return {
-        past: past.slice(0, past.length - 1),
-        present: past[past.length - 1],
-        future: [present, ...future],
-      };
-    case "REDO":
-      return {
-        past: [...past, present],
-        present: future[0],
-        future: future.slice(1),
-      };
-    case "SET":
-      const { newPresent } = action;
 
-      if (action.newPresent === present) {
-        return state;
-      }
+  if (action.type === "UNDO") {
+    return {
+      past: past.slice(0, past.length - 1),
+      present: past[past.length - 1],
+      future: [present, ...future],
+    };
+  } else if (action.type === "REDO") {
+    return {
+      past: [...past, present],
+      present: future[0],
+      future: future.slice(1),
+    };
+  } else if (action.type === "SET") {
+    const { newPresent } = action;
 
-      return {
-        past: [...past, present],
-        present: newPresent,
-        future: [],
-      };
-    case "CLEAR":
-      return {
-        ...initialUseHistoryStateState,
-        present: action.initialPresent,
-      };
-    default:
-      throw new Error("Unsupported action type");
+    if (action.newPresent === present) {
+      return state;
+    }
+
+    return {
+      past: [...past, present],
+      present: newPresent,
+      future: [],
+    };
+  } else if (action.type === "CLEAR") {
+    return {
+      ...initialState,
+      present: action.initialPresent,
+    };
+  } else {
+    throw new Error("Unsupported action type");
   }
 };
 
@@ -764,40 +763,29 @@ export function useKeyPress(key, cb, options = {}) {
 export function useList(defaultList = []) {
   const [list, setList] = React.useState(defaultList);
 
-  const methods = React.useMemo(() => {
-    const set = (l) => {
-      setList(l);
-    };
-
-    const push = (element) => {
-      setList((l) => [...l, element]);
-    };
-
-    const removeAt = (index) => {
-      setList((l) => [...l.slice(0, index), ...l.slice(index + 1)]);
-    };
+  const set = React.useCallback((l) => {
+    setList(l);
+  }, []);
 
-    const insertAt = (index, element) => {
-      setList((l) => [...l.slice(0, index), element, ...l.slice(index)]);
-    };
+  const push = React.useCallback((element) => {
+    setList((l) => [...l, element]);
+  }, []);
 
-    const updateAt = (index, element) => {
-      setList((l) => l.map((e, i) => (i === index ? element : e)));
-    };
+  const removeAt = React.useCallback((index) => {
+    setList((l) => [...l.slice(0, index), ...l.slice(index + 1)]);
+  }, []);
 
-    const clear = () => setList([]);
+  const insertAt = React.useCallback((index, element) => {
+    setList((l) => [...l.slice(0, index), element, ...l.slice(index)]);
+  }, []);
 
-    return {
-      set,
-      push,
-      removeAt,
-      insertAt,
-      updateAt,
-      clear,
-    };
+  const updateAt = React.useCallback((index, element) => {
+    setList((l) => l.map((e, i) => (i === index ? element : e)));
   }, []);
 
-  return [list, methods];
+  const clear = React.useCallback(() => setList([]), []);
+
+  return [list, { set, push, removeAt, insertAt, updateAt, clear }];
 }
 
 export function useLocalStorage(key, initialValue) {
@@ -1064,8 +1052,6 @@ export function useMouse() {
         const elementX = event.pageX - elementPositionX;
         const elementY = event.pageY - elementPositionY;
 
-        newState.elementX = elementX;
-        newState.elementY = elementY;
         newState.elementX = elementX;
         newState.elementY = elementY;
         newState.elementPositionX = elementPositionX;
@@ -1090,18 +1076,23 @@ export function useMouse() {
   return [state, ref];
 }
 
-export function useNetworkState() {
-  const connection =
+const getConnection = () => {
+  return (
     navigator?.connection ||
     navigator?.mozConnection ||
-    navigator?.webkitConnection;
+    navigator?.webkitConnection
+  );
+};
 
+export function useNetworkState() {
   const cache = React.useRef({});
 
   const subscribe = React.useCallback((callback) => {
     window.addEventListener("online", callback, { passive: true });
     window.addEventListener("offline", callback, { passive: true });
 
+    const connection = getConnection();
+
     if (connection) {
       connection.addEventListener("change", callback, { passive: true });
     }
@@ -1118,6 +1109,7 @@ export function useNetworkState() {
 
   const getSnapshot = () => {
     const online = navigator.onLine;
+    const connection = getConnection();
 
     const nextState = {
       online,
@@ -1491,57 +1483,6 @@ export function useSet(values) {
   return setRef.current;
 }
 
-export function useSpeech(text, options) {
-  const [state, setState] = React.useState(() => {
-    const { lang = "default", name = "" } = options.voice || {};
-    return {
-      isPlaying: false,
-      status: "init",
-      lang: options.lang || "default",
-      voiceInfo: { lang, name },
-      rate: options.rate || 1,
-      pitch: options.pitch || 1,
-      volume: options.volume || 1,
-    };
-  });
-
-  const optionsRef = React.useRef(options);
-
-  React.useEffect(() => {
-    const handlePlay = () => {
-      setState((s) => {
-        return { ...s, isPlaying: true, status: "play" };
-      });
-    };
-
-    const handlePause = () => {
-      setState((s) => {
-        return { ...s, isPlaying: false, status: "pause" };
-      });
-    };
-
-    const handleEnd = () => {
-      setState((s) => {
-        return { ...s, isPlaying: false, status: "end" };
-      });
-    };
-
-    const utterance = new SpeechSynthesisUtterance(text);
-    optionsRef.current.lang && (utterance.lang = optionsRef.current.lang);
-    optionsRef.current.voice && (utterance.voice = optionsRef.current.voice);
-    utterance.rate = optionsRef.current.rate || 1;
-    utterance.pitch = optionsRef.current.pitch || 1;
-    utterance.volume = optionsRef.current.volume || 1;
-    utterance.onstart = handlePlay;
-    utterance.onpause = handlePause;
-    utterance.onresume = handlePlay;
-    utterance.onend = handleEnd;
-    window.speechSynthesis.speak(utterance);
-  }, [text]);
-
-  return state;
-}
-
 export function useThrottle(value, interval = 500) {
   const [throttledValue, setThrottledValue] = React.useState(value);
   const lastUpdated = React.useRef();
@@ -1596,27 +1537,30 @@ export function useToggle(initialValue) {
   return [on, handleToggle];
 }
 
-export function useVisibilityChange() {
-  const [documentVisible, setDocumentVisibility] = React.useState(true);
+const useVisibilityChangeSubscribe = (callback) => {
+  document.addEventListener("visibilitychange", callback);
 
-  React.useEffect(() => {
-    const handleChange = () => {
-      if (document.visibilityState !== "visible") {
-        setDocumentVisibility(false);
-      } else {
-        setDocumentVisibility(true);
-      }
-    };
-    handleChange();
+  return () => {
+    document.removeEventListener("visibilitychange", callback);
+  };
+};
 
-    document.addEventListener("visibilitychange", handleChange);
+const getVisibilityChangeSnapshot = () => {
+  return document.visibilityState;
+};
 
-    return () => {
-      document.removeEventListener("visibilitychange", handleChange);
-    };
-  }, []);
+const getVisibilityChangeServerSnapshot = () => {
+  throw Error("useVisibilityChange is a client-only hook");
+};
+
+export function useVisibilityChange() {
+  const visibilityState = React.useSyncExternalStore(
+    useVisibilityChangeSubscribe,
+    getVisibilityChangeSnapshot,
+    getVisibilityChangeServerSnapshot
+  );
 
-  return documentVisible;
+  return visibilityState === "visible";
 }
 
 export function useWindowScroll() {

usehooks.com/src/content/hooks/useCopyToClipboard.mdx

@@ -23,14 +23,6 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 </HookDescription>
 
 <div class="reference">
-  ### Parameters
-
-  <div class="table-container">
-  | Name  | Type   | Description                              |
-  | ----- | ------ | ---------------------------------------- |
-  | value | string | The value to be copied to the clipboard. |
-  </div>
-
   ### Return Value
 
   The `useCopyToClipboard` hook returns an array with the following elements:

usehooks.com/src/content/hooks/useDefault.mdx

@@ -13,13 +13,7 @@ import HookDescription from "../../components/HookDescription.astro";
 import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 
 <HookDescription name={frontmatter.name}>
-  The useDefault hook is useful for managing state in functional components with
-  default values. The hook then checks if the "state" is undefined or null. If
-  it is, it returns an array containing the "defaultValue" and the "setState"
-  function, allowing the component to set a default value and update the state
-  accordingly. On the other hand, if the "state" is defined, it returns an array
-  with the current "state" value and the "setState" function, enabling normal
-  state management.
+  The `useDefault` hook behaves similar to `useState` but with one difference – if the state of the hook is `undefined` or `null`, `useDefault` will default the state to a provided default value.
 </HookDescription>
 
 <div class="reference">
@@ -28,7 +22,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   <div class="table-container">
   | Name         | Type     | Description |
   | ------------ | -------- | ----------- |
-  | initialValue | any      | This is the initial state value provided when calling `useDefault`. |
+  | initialValue | any      | The initial value of the state returned from `useDefault` |
   | defaultValue | any      | The default value to be used if the state is `undefined` or `null`. |
   </div>