Merge branch 'main' into experimental

Author: benadam11

README.md

@@ -1,67 +1,71 @@
 # useHooks
 
-A collection of 50 RSC safe React hooks
+A collection of Server Component safe React Hooks – from the ui.dev team
 
 ## Standard
 
 ### Install
 
 `npm i @uidotdev/usehooks`
 
-- [useBattery](https://usehooks.com/useBattery)
-- [useClickAway](https://usehooks.com/useClickAway)
-- [useCopyToClipboard](https://usehooks.com/useCopyToClipboard)
-- [useCounter](https://usehooks.com/useCounter)
-- [useDebounce](https://usehooks.com/useDebounce)
-- [useDefault](https://usehooks.com/useDefault)
-- [useDocumentTitle](https://usehooks.com/useDocumentTitle)
-- [useFavicon](https://usehooks.com/useFavicon)
-- [useGeolocation](https://usehooks.com/useGeolocation)
-- [useHistoryState](https://usehooks.com/useHistoryState)
-- [useHover](https://usehooks.com/useHover)
-- [useIdle](https://usehooks.com/useIdle)
-- [useIntersectionObserver](https://usehooks.com/useIntersectionObserver)
-- [useIsClient](https://usehooks.com/useIsClient)
-- [useIsFirstRender](https://usehooks.com/useIsFirstRender)
-- [useList](https://usehooks.com/useList)
-- [useLockBodyScroll](https://usehooks.com/useLockBodyScroll)
-- [useLongPress](https://usehooks.com/useLongPress)
-- [useMap](https://usehooks.com/useMap)
-- [useMeasure](https://usehooks.com/useMeasure)
-- [useMediaQuery](https://usehooks.com/useMediaQuery)
-- [useMouse](https://usehooks.com/useMouse)
-- [useNetworkState](https://usehooks.com/useNetworkState)
-- [useObjectState](https://usehooks.com/useObjectState)
-- [useOrientation](https://usehooks.com/useOrientation)
-- [usePreferredLanguage](https://usehooks.com/usePreferredLanguage)
-- [usePrevious](https://usehooks.com/usePrevious)
-- [useQueue](https://usehooks.com/useQueue)
-- [useRenderCount](https://usehooks.com/useRenderCount)
-- [useRenderInfo](https://usehooks.com/useRenderInfo)
-- [useScript](https://usehooks.com/useScript)
-- [useSet](https://usehooks.com/useSet)
-- [useThrottle](https://usehooks.com/useThrottle)
-- [useToggle](https://usehooks.com/useToggle)
-- [useVisibilityChange](https://usehooks.com/useVisibilityChange)
-- [useWindowScroll](https://usehooks.com/useWindowScroll)
-- [useWindowSize](https://usehooks.com/useWindowSize)
+### Hooks
+
+- [useBattery](https://usehooks.com/usebattery)
+- [useClickAway](https://usehooks.com/useclickAway)
+- [useCopyToClipboard](https://usehooks.com/usecopytoclipboard)
+- [useCounter](https://usehooks.com/usecounter)
+- [useDebounce](https://usehooks.com/usedebounce)
+- [useDefault](https://usehooks.com/usedefault)
+- [useDocumentTitle](https://usehooks.com/usedocumentTitle)
+- [useFavicon](https://usehooks.com/usefavicon)
+- [useGeolocation](https://usehooks.com/usegeolocation)
+- [useHistoryState](https://usehooks.com/usehistoryState)
+- [useHover](https://usehooks.com/usehover)
+- [useIdle](https://usehooks.com/useidle)
+- [useIntersectionObserver](https://usehooks.com/useintersectionobserver)
+- [useIsClient](https://usehooks.com/useisclient)
+- [useIsFirstRender](https://usehooks.com/useisfirstrender)
+- [useList](https://usehooks.com/uselist)
+- [useLockBodyScroll](https://usehooks.com/uselockbodyscroll)
+- [useLongPress](https://usehooks.com/uselongpress)
+- [useMap](https://usehooks.com/usemap)
+- [useMeasure](https://usehooks.com/usemeasure)
+- [useMediaQuery](https://usehooks.com/usemediaquery)
+- [useMouse](https://usehooks.com/usemouse)
+- [useNetworkState](https://usehooks.com/usenetworkstate)
+- [useObjectState](https://usehooks.com/useobjectstate)
+- [useOrientation](https://usehooks.com/useorientation)
+- [usePreferredLanguage](https://usehooks.com/usepreferredlanguage)
+- [usePrevious](https://usehooks.com/useprevious)
+- [useQueue](https://usehooks.com/usequeue)
+- [useRenderCount](https://usehooks.com/userendercount)
+- [useRenderInfo](https://usehooks.com/userenderinfo)
+- [useScript](https://usehooks.com/usescript)
+- [useSet](https://usehooks.com/useset)
+- [useThrottle](https://usehooks.com/usethrottle)
+- [useToggle](https://usehooks.com/usetoggle)
+- [useVisibilityChange](https://usehooks.com/usevisibilitychange)
+- [useWindowScroll](https://usehooks.com/usewindowscroll)
+- [useWindowSize](https://usehooks.com/usewindowSize)
 
 ## Experimental
 
 ### Install
 
 `npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimental`
 
-- [useContinuousRetry](https://usehooks.com/useContinuousRetry)
-- [useCountdown](https://usehooks.com/useCountdown)
-- [useEventListener](https://usehooks.com/useEventListener)
-- [useFetch](https://usehooks.com/useFetch)
-- [useInterval](https://usehooks.com/useInterval)
-- [useIntervalWhen](https://usehooks.com/useIntervalWhen)
-- [useKeyPress](https://usehooks.com/useKeyPress)
-- [useLocalStorage](https://usehooks.com/useLocalStorage)
-- [useLogger](https://usehooks.com/useLogger)
-- [usePageLeave](https://usehooks.com/usePageLeave)
-- [useRandomInterval](https://usehooks.com/useRandomInterval)
-- [useSessionStorage](https://usehooks.com/useSessionStorage)
-- [useTimeout](https://usehooks.com/useTimeout)
+### Hooks
+
+- [useContinuousRetry](https://usehooks.com/usecontinuousretry)
+- [useCountdown](https://usehooks.com/usecountdown)
+- [useEventListener](https://usehooks.com/useeventlistener)
+- [useFetch](https://usehooks.com/usefetch)
+- [useInterval](https://usehooks.com/useinterval)
+- [useIntervalWhen](https://usehooks.com/useintervalwhen)
+- [useKeyPress](https://usehooks.com/usekeypress)
+- [useLocalStorage](https://usehooks.com/uselocalstorage)
+- [useLogger](https://usehooks.com/uselogger)
+- [usePageLeave](https://usehooks.com/usepageleave)
+- [useRandomInterval](https://usehooks.com/userandominterval)
+- [useSessionStorage](https://usehooks.com/usesessionstorage)
+- [useTimeout](https://usehooks.com/usetimeout)

index.js

@@ -594,7 +594,6 @@ export function useIdle(ms = 1000 * 60) {
     };
 
     const handleEvent = throttle((e) => {
-      console.log("EVENT");
       setIdle(false);
 
       window.clearTimeout(timeoutId);
@@ -1078,8 +1077,6 @@ export function useMouse() {
     };
   }, []);
 
-  console.log({ state });
-
   return [state, ref];
 }
 
@@ -1547,7 +1544,6 @@ export function useSpeech(text, options) {
     utterance.onpause = handlePause;
     utterance.onresume = handlePlay;
     utterance.onend = handleEnd;
-    console.log("ayy", text);
     window.speechSynthesis.speak(utterance);
   }, [text]);
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@uidotdev/usehooks",
   "version": "0.0.4-experimental.1",
-  "description": "A collection of RSC safe React hooks",
+  "description": "A collection of Server Component safe React Hooks – from the ui.dev team",
   "type": "module",
   "repository": "uidotdev/usehooks",
   "devDependencies": {

package.json

@@ -13,6 +13,7 @@ import sitemap from "@astrojs/sitemap";
 // https://astro.build/config
 export default defineConfig({
   site: "https://usehooks.com",
+  trailingSlash: "never",
   integrations: [react(), tailwind(), mdx(), sitemap()],
   output: "static",
   // adapter: vercel(),

usehooks.com/astro.config.mjs

@@ -43,7 +43,7 @@ const { name } = Astro.props;
   }
 
   .callout {
-    margin-top: 1rem;
+    margin: 1rem 0 1.5rem;
     align-self: start;
     padding: 1.5rem;
     padding-bottom: 0;
@@ -76,6 +76,7 @@ const { name } = Astro.props;
   @media screen and (min-width: 811px) {
     .callout {
       max-width: var(--callout-width);
+      margin-bottom: 0;
     }
   }
 </style>

usehooks.com/public/meta/og.jpg

@@ -45,14 +45,15 @@ const { class: className } = Astro.props;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 2rem;
+    gap: clamp(.7rem, 3vw, 2rem);
     background-color: var(--charcoal);
-    padding: 1.3rem 1.5rem;
+    padding: clamp(1rem, 4vw, 1.3rem) clamp(1rem, 4vw, 1.5rem);
     border-radius: 0.5rem;
   }
 
   .install code {
     margin-top: 0.3rem;
+    padding: 0;
     font-size: clamp(0.8rem, 3vw, 1.2rem) !important;
   }
 

usehooks.com/src/components/HookDescription.astro

@@ -9,7 +9,7 @@ export default function HookCard({
 }) {
   return (
     <li className={styles.hook}>
-      <a href={`/${name.toLowerCase()}/`}>
+      <a href={`/${name.toLowerCase()}`}>
         <h3 className={styles["card-title"]}>{name}</h3>
         <p className={styles["card-description"]}>{tagline}</p>
         <svg

usehooks.com/src/components/Install.astro

@@ -56,25 +56,25 @@ export default function HooksList({ hooks }) {
       imageHeight: "206",
       imageAlt: "20-sided die",
       pitch:
-        "Don’t go it alone. Learn how to implement useHooks in your React projects.",
+        "It's dangerous to go alone! Master React by learning how to build useHooks yourself.",
     },
     {
       id: "Callout 2",
-      image: "money",
+      image: "spinner",
       imageWidth: "284",
       imageHeight: "180",
-      imageAlt: "$100 Monopoly-style money",
+      imageAlt: "board game spinner and all options are React",
       pitch:
-        "Level up faster. Learn how to implement useHooks in your React projects.",
+        "There's no better way to learn useHooks than by building it yourself.",
     },
     {
       id: "Callout 3",
-      image: "spinner",
+      image: "money",
       imageWidth: "210",
       imageHeight: "210",
-      imageAlt: "board game spinner and all options are React",
+      imageAlt: "$100 Monopoly-style money",
       pitch:
-        "Want to learn how to build useHooks yourself? Check out react.gg – the interactive way to master modern React.",
+        "Please give us your money.",
     },
     {
       id: "Callout 4",
@@ -83,7 +83,7 @@ export default function HooksList({ hooks }) {
       imageHeight: "224",
       imageAlt: "travel-style postcard from React that says “Enjoy the views!",
       pitch:
-        "Check out 🔥 react.gg 🔥 – the interactive way to master modern React.",
+        "The all new interactive way to master modern React (for fun and profit).",
     }
   ]);