Merge branch 'uidotdev:main' into main

Author: nsdonato

index.js

@@ -98,6 +98,10 @@ export function useClickAway(cb) {
   const ref = React.useRef(null);
   const refCb = React.useRef(cb);
 
+  React.useLayoutEffect(() => {
+    refCb.current = cb;
+  });
+
   React.useEffect(() => {
     const handler = (e) => {
       const element = ref.current;
@@ -591,6 +595,10 @@ export function useLongPress(
   const timerId = React.useRef();
   const cbRef = React.useRef(callback);
 
+  React.useLayoutEffect(() => {
+    cbRef.current = callback;
+  });
+
   const start = React.useCallback(
     () => (event) => {
       if (isPressed.current) return;
@@ -967,6 +975,7 @@ export function useQueue(initialValue = []) {
     first: queue[0],
     last: queue[queue.length - 1],
     size: queue.length,
+    queue
   };
 }
 
@@ -1201,6 +1210,7 @@ export function useVisibilityChange() {
         setDocumentVisibility(true);
       }
     };
+    handleChange()
 
     document.addEventListener("visibilitychange", handleChange);
 

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

@@ -50,39 +50,43 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 
 ```jsx
 import * as React from "react";
-import { useLongPress } from "@uidotdev/usehooks";
-import { closeIcon } from "./icons";
+import { useMeasure } from "@uidotdev/usehooks";
 
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const attrs = useLongPress(
-    () => {
-      setIsOpen(true);
-    },
-    {
-      onStart: (event) => console.log("Press started"),
-      onFinish: (event) => console.log("Press Finished"),
-      onCancel: (event) => console.log("Press cancelled"),
-      threshold: 500,
-    }
+function Measure({ type = "horizontal" }) {
+  const [ref, { width, height }] = useMeasure();
+
+  return (
+    <figure>
+      <figcaption>
+        <span>{type}</span>
+      </figcaption>
+      <article
+        ref={ref}
+        className={type}
+        style={{
+          resize: type
+        }}
+      >
+        {type === "horizontal" ? (
+          <label>width: {Math.floor(width)}</label>
+        ) : (
+          <label>height: {Math.floor(height)}</label>
+        )}
+      </article>
+    </figure>
   );
+}
 
+export default function App() {
   return (
     <section>
-      <h1>useLongPress</h1>
-      <button {...attrs} className="primary">
-        Press Me
-      </button>
-      {isOpen && (
-        <dialog>
-          <button onClick={() => setIsOpen(false)}>{closeIcon}</button>
-          <h2>Modal</h2>
-          <p>This is a modal triggered by a long press.</p>
-        </dialog>
-      )}
+      <h1>useMeasure</h1>
+      <p>(Resize the rulers)</p>
+      <Measure />
     </section>
   );
 }
+
 ```
 
 </StaticCodeContainer>