make straight apostrophes curly

lynnandtonic · lynnandtonic · commit 93d542368f09 · 2023-05-30T10:49:08.000-07:00
diff --git a/usehooks.com/src/components/search/HooksList.tsx b/usehooks.com/src/components/search/HooksList.tsx
@@ -56,7 +56,7 @@ export default function HooksList({ hooks }) {
       imageHeight: "206",
       imageAlt: "20-sided die",
       pitch:
-        "It's dangerous to go alone! Master React by learning how to build useHooks yourself.",
+        "It’s dangerous to go alone! Master React by learning how to build useHooks yourself.",
     },
     {
       id: "Callout 2",
@@ -65,7 +65,7 @@ export default function HooksList({ hooks }) {
       imageHeight: "180",
       imageAlt: "board game spinner and all options are React",
       pitch:
-        "There's no better way to learn useHooks than by building it yourself.",
+        "There’s no better way to learn useHooks than by building it yourself.",
     },
     {
       id: "Callout 3",
diff --git a/usehooks.com/src/content/hooks/useBattery.mdx b/usehooks.com/src/content/hooks/useBattery.mdx
@@ -1,7 +1,7 @@
 ---
 name: useBattery
 rank: 32
-tagline: Track the battery status of a user's device with useBattery.
+tagline: Track the battery status of a user’s device with useBattery.
 sandboxId: usebattery-o8js1p
 previewHeight: 320px
 relatedHooks:
@@ -15,7 +15,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 
 <HookDescription name={frontmatter.name}>
   The useBattery hook is useful for accessing and monitoring the battery status
-  of the user's device in a React application. By using this hook, you can
+  of the user’s device in a React application. By using this hook, you can
   easily retrieve information such as the battery level, charging status, and
   estimated charging and discharging times. It provides a state object that
   includes properties like supported, loading, level, charging, chargingTime,
@@ -30,12 +30,12 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   <div class="table-container">
   | Name             | Type    | Description |
   | ---------------- | ------- | ----------- |
-  | supported        | boolean | Indicates whether the Battery Status API is supported in the user's browser. |
+  | supported        | boolean | Indicates whether the Battery Status API is supported in the user’s browser. |
   | loading          | boolean | Indicates if the battery information is still loading. |
-  | level            | number  | Represents the level of the system's battery. 0.0 means that the system's battery is completely discharged, and 1.0 means the battery is completely charged. |
-  | charging         | boolean | Represents whether the system's battery is charging. `true` means the battery is charging, `false` means it's not. |
-  | chargingTime     | number  | Represents the time remaining in seconds until the system's battery is fully charged. |
-  | dischargingTime  | number  | Represents the time remaining in seconds until the system's battery is completely discharged and the system is about to be suspended. |
+  | level            | number  | Represents the level of the system’s battery. 0.0 means that the system’s battery is completely discharged, and 1.0 means the battery is completely charged. |
+  | charging         | boolean | Represents whether the system’s battery is charging. `true` means the battery is charging, `false` means it’s not. |
+  | chargingTime     | number  | Represents the time remaining in seconds until the system’s battery is fully charged. |
+  | dischargingTime  | number  | Represents the time remaining in seconds until the system’s battery is completely discharged and the system is about to be suspended. |
   </div>
 </div>
 
diff --git a/usehooks.com/src/content/hooks/useClickAway.mdx b/usehooks.com/src/content/hooks/useClickAway.mdx
@@ -16,11 +16,11 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 <HookDescription name={frontmatter.name}>
   The useClickAway hook is a useful for detecting clicks outside a specific
   component. It allows you to pass a callback function that will be triggered
-  whenever a click occurs outside the component's area. This hook is
+  whenever a click occurs outside the component’s area. This hook is
   particularly helpful when implementing dropdown menus, modals, or any other UI
   elements that need to be closed when the user clicks outside of them. By
   attaching event listeners to the document, the hook checks if the click target
-  is within the component's reference, and if not, it invokes the provided
+  is within the component’s reference, and if not, it invokes the provided
   callback function.
 </HookDescription>
 
diff --git a/usehooks.com/src/content/hooks/useIntersectionObserver.mdx b/usehooks.com/src/content/hooks/useIntersectionObserver.mdx
@@ -29,9 +29,9 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   <div class="table-container">
   | Name       | Type    | Default | Description                                                                                                                                                                                                                                                |
   | ---------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-  | threshold  | number  | 1       | Either a single number or an array of numbers between 0 and 1, indicating at what percentage of the target's visibility the observer's callback should be executed.                                                                                        |
+  | threshold  | number  | 1       | Either a single number or an array of numbers between 0 and 1, indicating at what percentage of the target’s visibility the observer’s callback should be executed.                                                                                        |
   | root       | element | null    | The Element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.                                                                                                              |
-  | rootMargin | string  | "0%"    | Margin around the root. Can have values similar to the CSS margin property. The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros. |
+  | rootMargin | string  | "0%"    | Margin around the root. Can have values similar to the CSS margin property. The values can be percentages. This set of values serves to grow or shrink each side of the root element’s bounding box before computing intersections. Defaults to all zeros. |
   </div>
 
   ### Return Value
diff --git a/usehooks.com/src/content/hooks/useLocalStorage.mdx b/usehooks.com/src/content/hooks/useLocalStorage.mdx
@@ -2,7 +2,7 @@
 name: useLocalStorage
 experimental: true
 rank: 2
-tagline: Store, retrieve, and synchronize data from the browser's localStorage API with useLocalStorage
+tagline: Store, retrieve, and synchronize data from the browser’s localStorage API with useLocalStorage
 sandboxId: uselocalstorage-e6v6ey
 previewHeight: 670px
 relatedHooks:
@@ -18,7 +18,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   a component with the data stored in local storage. It automatically reads the
   initial value from local storage when the component mounts and updates the
   local storage whenever the state changes. Additionally, it listens for changes
-  in local storage made by other tabs or windows and keeps the component's state
+  in local storage made by other tabs or windows and keeps the component’s state
   up to date.
 </HookDescription>
 
diff --git a/usehooks.com/src/content/hooks/useLockBodyScroll.mdx b/usehooks.com/src/content/hooks/useLockBodyScroll.mdx
@@ -16,7 +16,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   The useLockBodyScroll hook temporarily disables scrolling on the document
   body. This can be beneficial in scenarios where you want to restrict scrolling
   while displaying a modal, a dropdown menu, or any other component that
-  requires the user's focus. Once the component using this hook is unmounted or
+  requires the user’s focus. Once the component using this hook is unmounted or
   no longer needed, the hook returns a cleanup function that restores the
   original overflow style, ensuring that the scroll behavior is reverted to its
   previous state.
diff --git a/usehooks.com/src/content/hooks/useLogger.mdx b/usehooks.com/src/content/hooks/useLogger.mdx
@@ -19,7 +19,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   and it logs the lifecycle events (mounted, updated, and unmounted) along with
   the provided name and arguments. This useLogger hook can be employed to
   facilitate debugging, monitoring, or performance optimization by providing
-  insights into when and how a component's lifecycle events occur.
+  insights into when and how a component’s lifecycle events occur.
 </HookDescription>
 
 <div class="reference">
diff --git a/usehooks.com/src/content/hooks/useMap.mdx b/usehooks.com/src/content/hooks/useMap.mdx
@@ -15,7 +15,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 
 <HookDescription name={frontmatter.name}>
   The useMap hook provides a wrapper around the JavaScript Map object and allows
-  you to easily update and synchronize the map state with the component's
+  you to easily update and synchronize the map state with the component’s
   rendering. By using this hook, you can add, delete, or clear entries in the
   map while ensuring that the component re-renders whenever these operations are
   performed.
diff --git a/usehooks.com/src/content/hooks/useMeasure.mdx b/usehooks.com/src/content/hooks/useMeasure.mdx
@@ -1,7 +1,7 @@
 ---
 name: useMeasure
 rank: 46
-tagline: Effortlessly measure and track your component's dimensions with useMeasure.
+tagline: Effortlessly measure and track your component’s dimensions with useMeasure.
 sandboxId: usemeasure-3kyegb
 previewHeight: 300px
 relatedHooks:
@@ -15,7 +15,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 <HookDescription name={frontmatter.name}>
   The useMeasure hook provides a convenient and efficient way to monitor and
   respond to changes in the size of a React component. This custom hook uses the
-  ResizeObserver API to actively track changes in the component's dimensions,
+  ResizeObserver API to actively track changes in the component’s dimensions,
   such as width and height, and keeps them available as state. The returned ref
   is used on the element whose dimensions you want to measure, making it a
   valuable tool for responsive design and dynamic layout adjustments.
diff --git a/usehooks.com/src/content/hooks/useMediaQuery.mdx b/usehooks.com/src/content/hooks/useMediaQuery.mdx
@@ -17,7 +17,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   The useMediaQuery hook leverages the window.matchMedia API to subscribe to CSS
   media query changes, thereby providing real-time responsiveness to dynamic
   changes in the viewport or screen orientation. It allows the component to
-  rerender whenever the media query's result changes. It throws an error if
+  rerender whenever the media query’s result changes. It throws an error if
   attempted to be used on the server-side (media queries only work in the
   browser).
 </HookDescription>
diff --git a/usehooks.com/src/content/hooks/useMouse.mdx b/usehooks.com/src/content/hooks/useMouse.mdx
@@ -45,8 +45,8 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   | ------------------------ | ------ | --------------------------------------------------------------------------------------- |
   | `state.x`                | number | The current horizontal position of the mouse relative to the page.                      |
   | `state.y`                | number | The current vertical position of the mouse relative to the page.                        |
-  | `state.elementX`         | number | The current horizontal position of the mouse relative to the element's top-left corner. |
-  | `state.elementY`         | number | The current vertical position of the mouse relative to the element's top-left corner.   |
+  | `state.elementX`         | number | The current horizontal position of the mouse relative to the element’s top-left corner. |
+  | `state.elementY`         | number | The current vertical position of the mouse relative to the element’s top-left corner.   |
   | `state.elementPositionX` | number | The current horizontal position of the element relative to the page.                    |
   | `state.elementPositionY` | number | The current vertical position of the element relative to the page.                      |
   </div>
diff --git a/usehooks.com/src/content/hooks/useOrientation.mdx b/usehooks.com/src/content/hooks/useOrientation.mdx
@@ -14,7 +14,7 @@ import HookDescription from "../../components/HookDescription.astro";
 import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 
 <HookDescription name={frontmatter.name}>
-  The useOrientation React Hook simplifies the management of a device's
+  The useOrientation React Hook simplifies the management of a device’s
   orientation within a React application. It wraps the complexity of listening
   for, handling, and cleaning up after orientation changes into a reusable hook.
   By abstracting this logic, the hook allows you to easily track device
@@ -26,7 +26,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 <div class="reference">
   ### Parameters
 
-  This hook doesn't accept any parameters.
+  This hook doesn’t accept any parameters.
 
   ### Return Value
 
diff --git a/usehooks.com/src/content/hooks/usePageLeave.mdx b/usehooks.com/src/content/hooks/usePageLeave.mdx
@@ -17,8 +17,8 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 <HookDescription name={frontmatter.name}>
   The usePageLeave hook is useful for tracking when a user leaves a webpage or
   navigates away from it. When the mouseout event is triggered, the callback
-  function is executed only if the user's cursor moves outside the webpage or
-  onto an element outside the webpage (e.g., the browser's address bar). This
+  function is executed only if the user’s cursor moves outside the webpage or
+  onto an element outside the webpage (e.g., the browser’s address bar). This
   hook is beneficial for scenarios where you need to perform specific actions
   when a user leaves your webpage, such as saving user progress, displaying a
   confirmation prompt, or triggering analytics events.
diff --git a/usehooks.com/src/content/hooks/useRenderInfo.mdx b/usehooks.com/src/content/hooks/useRenderInfo.mdx
@@ -27,7 +27,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   <div class="table-container">
   | Name                 | Type   | Description                                                       |
   | -------------------- | ------ | ----------------------------------------------------------------- |
-  | info                 | object | An object containing information about the component's rendering. |
+  | info                 | object | An object containing information about the component’s rendering. |
   | info.name            | string | The name of the component.                                        |
   | info.renders         | number | The number of times the component has rendered.                   |
   | info.sinceLastRender | number | The time elapsed in milliseconds since the last render.           |
diff --git a/usehooks.com/src/content/hooks/useScript.mdx b/usehooks.com/src/content/hooks/useScript.mdx
@@ -17,7 +17,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   scripts into a React component. It manages the loading and status of the
   script, allowing you to conditionally render components or perform actions
   based on whether the script has been successfully loaded or encountered an
-  error. The hook keeps track of the script's status, such as "loading,"
+  error. The hook keeps track of the script’s status, such as "loading,"
   "ready," or "error," and provides this status as a return value. Additionally,
   it offers options to remove the script when the component is unmounted,
   ensuring proper cleanup.
diff --git a/usehooks.com/src/content/hooks/useSessionStorage.mdx b/usehooks.com/src/content/hooks/useSessionStorage.mdx
@@ -2,7 +2,7 @@
 name: useSessionStorage
 experimental: true
 rank: 9
-tagline: Store, retrieve, and synchronize data from the browser's session storage with useSessionStorage.
+tagline: Store, retrieve, and synchronize data from the browser’s session storage with useSessionStorage.
 sandboxId: usesessionstorage-yoodu4
 previewHeight: 400px
 relatedHooks:
@@ -15,7 +15,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 
 <HookDescription name={frontmatter.name}>
   The useSessionStorage hook allows you to store and retrieve data in the
-  browser's session storage, providing a way to persist data across multiple
+  browser’s session storage, providing a way to persist data across multiple
   page views or browser refreshes. The hook utilizes the window.sessionStorage
   API to store and retrieve data in the session storage. It automatically
   synchronizes the stored data with the local state of the component using the
diff --git a/usehooks.com/src/content/hooks/useToggle.mdx b/usehooks.com/src/content/hooks/useToggle.mdx
@@ -14,8 +14,8 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 
 <HookDescription name={frontmatter.name}>
   Basically, what this hook does is that, it takes a parameter with value true
-  or false and toggles that value to opposite. It's useful when we want to take
-  some action into it's opposite action, for example: show and hide modal, show
+  or false and toggles that value to opposite. It’s useful when we want to take
+  some action into its opposite action, for example: show and hide modal, show
   more/show less text, open/close side menu.
 </HookDescription>
 
