From 8b0af605d6d2aba05f69a0395713254d6b0cf1b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6ssner?= <jakob.roessner@outlook.de>
Date: Wed, 11 Dec 2024 02:48:37 +1100
Subject: [PATCH] fix: docusaurus internal code formatting (#122)

- Fix issue described in: https://github.com/FormidableLabs/react-live/issues/403
- Reverted most of the changes of a1f64f7fb67dcda40c874a66b5a77377e8fccd85
- Added a new React 19 hint to the use hook
---
 .../docs/browser/useBroadcastChannel.mdx      |   2 +-
 .../docs/browser/useClipboard.mdx             |   3 +-
 .../docs/browser/useCssVar.mdx                |   5 +-
 .../docs/browser/useDarkMode.mdx              |   2 +-
 .../docs/browser/useDevicePixelRatio.mdx      |   2 +-
 .../docs/browser/useElementByPoint.mdx        |   2 +-
 .../docs/browser/useEventSource.mdx           |   2 +-
 .../docs/browser/useEyeDropper.mdx            |   3 +-
 .../docs/browser/useFavicon.mdx               |   3 +-
 .../docs/browser/useFetchEventSource.mdx      |  10 +-
 .../docs/browser/useFileDialog.mdx            |   3 +-
 .../docs/browser/useFps.mdx                   |   3 +-
 .../docs/browser/useFullscreen.mdx            |   3 +-
 .../docs/browser/useGeolocation.mdx           |   3 +-
 .../docs/browser/useIdle.mdx                  |   3 +-
 .../docs/browser/useInfiniteScroll.mdx        |   3 +-
 .../docs/browser/useKeyModifier.mdx           |   3 +-
 .../docs/browser/useLocationSelector.mdx      |   9 +-
 .../docs/browser/useLongPress.mdx             |   3 +-
 .../docs/browser/useMediaDevices.mdx          |   3 +-
 .../docs/browser/useMediaQuery.mdx            |   3 +-
 .../docs/browser/useMobileLandscape.mdx       |   3 +-
 .../docs/browser/useMouse.mdx                 |   3 +-
 .../docs/browser/useMousePressed.mdx          |   3 +-
 .../docs/browser/useNetwork.mdx               |   3 +-
 .../docs/browser/useObjectUrl.mdx             |   3 +-
 .../docs/browser/useOnline.mdx                |   3 +-
 .../docs/browser/useOrientation.mdx           |   3 +-
 .../docs/browser/usePageLeave.mdx             |   3 +-
 .../docs/browser/usePermission.mdx            |   3 +-
 .../docs/browser/usePlatform.mdx              |   3 +-
 .../docs/browser/usePreferredColorScheme.mdx  |   3 +-
 .../docs/browser/usePreferredContrast.mdx     |   3 +-
 .../docs/browser/usePreferredDark.mdx         |   3 +-
 .../docs/browser/usePreferredLanguages.mdx    |   2 +-
 .../docs/browser/useReducedMotion.mdx         |   3 +-
 .../docs/browser/useScreenSafeArea.mdx        |   5 +-
 .../docs/browser/useScriptTag.mdx             |   3 +-
 .../docs/browser/useScroll.mdx                |   3 +-
 .../docs/browser/useScrollIntoView.mdx        |   5 +-
 .../docs/browser/useScrollLock.mdx            |   3 +-
 .../docs/browser/useTextDirection.mdx         |   3 +-
 .../docs/browser/useTitle.mdx                 |   3 +-
 .../docs/browser/useWebNotification.mdx       |   5 +-
 .../docs/effect/useAsyncEffect.mdx            |   3 +-
 .../docs/effect/useCustomCompareEffect.mdx    |   3 +-
 .../docs/effect/useDebounceFn.mdx             |   3 +-
 .../docs/effect/useDeepCompareEffect.mdx      |   3 +-
 .../docs/effect/useEvent.mdx                  |   3 +-
 .../docs/effect/useEventEmitter.mdx           |   3 +-
 .../docs/effect/useEventListener.mdx          |   3 +-
 .../docs/effect/useInterval.mdx               |   3 +-
 .../docs/effect/useIsomorphicLayoutEffect.mdx |   3 +-
 .../docs/effect/useMount.mdx                  |   3 +-
 .../docs/effect/useOnceEffect.mdx             |   3 +-
 .../docs/effect/useOnceLayoutEffect.mdx       |   3 +-
 .../docs/effect/useRafFn.mdx                  |   3 +-
 .../docs/effect/useThrottleFn.mdx             |   3 +-
 .../docs/effect/useTimeout.mdx                |   3 +-
 .../docs/effect/useTimeoutFn.mdx              |   3 +-
 .../docs/effect/useUnmount.mdx                |   3 +-
 .../docs/effect/useUpdate.mdx                 |   3 +-
 .../docs/effect/useUpdateEffect.mdx           |   3 +-
 .../docs/effect/useUpdateLayoutEffect.mdx     |   3 +-
 .../docs/element/useActiveElement.mdx         |   3 +-
 .../docs/element/useClickOutside.mdx          |   5 +-
 .../docs/element/useDocumentVisibility.mdx    |   5 +-
 .../docs/element/useDoubleClick.mdx           |   3 +-
 .../docs/element/useDraggable.mdx             |   4 +-
 .../docs/element/useDropZone.mdx              |   3 +-
 .../docs/element/useElementBounding.mdx       |   3 +-
 .../docs/element/useElementSize.mdx           |   3 +-
 .../docs/element/useElementVisibility.mdx     |   3 +-
 .../docs/element/useFocus.mdx                 |   3 +-
 .../docs/element/useIntersectionObserver.mdx  |   2 +-
 .../docs/element/useMeasure.mdx               |   3 +-
 .../docs/element/useMutationObserver.mdx      |   2 +-
 .../docs/element/useResizeObserver.mdx        |   3 +-
 .../docs/element/useSticky.mdx                |   2 +-
 .../docs/element/useWindowFocus.mdx           |   3 +-
 .../docs/element/useWindowScroll.mdx          |   2 +-
 .../docs/element/useWindowSize.mdx            |   3 +-
 .../docs/integrations/useQRCode.mdx           |   2 +-
 .../website-docusaurus/docs/state/use.mdx     |   6 +-
 .../docs/state/useControlled.mdx              |   2 +-
 .../docs/state/useCookie.mdx                  |   2 +-
 .../docs/state/useCountDown.mdx               |   3 +-
 .../docs/state/useCounter.mdx                 |   3 +-
 .../docs/state/useCycleList.mdx               |   3 +-
 .../docs/state/useDebounce.mdx                |   3 +-
 .../docs/state/useDisclosure.mdx              |   2 +-
 .../docs/state/useFirstMountState.mdx         |   3 +-
 .../docs/state/useHover.mdx                   |   3 +-
 .../docs/state/useLatest.mdx                  |   3 +-
 .../docs/state/useLocalStorage.mdx            |   3 +-
 .../docs/state/useMergedRefs.mdx              |   2 +-
 .../docs/state/useMountedState.mdx            |   3 +-
 .../docs/state/usePrevious.mdx                |   3 +-
 .../docs/state/useRafState.mdx                |   3 +-
 .../docs/state/useSessionStorage.mdx          |   3 +-
 .../docs/state/useSetState.mdx                |   3 +-
 .../docs/state/useSupported.mdx               |   3 +-
 .../docs/state/useTextSelection.mdx           |   3 +-
 .../docs/state/useThrottle.mdx                |   3 +-
 .../docs/state/useToggle.mdx                  |   3 +-
 .../src/theme/Playground/index.tsx            | 141 ++++++++++++++++++
 .../src/theme/Playground/styles.module.css    |  33 ++++
 107 files changed, 296 insertions(+), 207 deletions(-)
 create mode 100644 packages/website-docusaurus/src/theme/Playground/index.tsx
 create mode 100644 packages/website-docusaurus/src/theme/Playground/styles.module.css

diff --git a/packages/website-docusaurus/docs/browser/useBroadcastChannel.mdx b/packages/website-docusaurus/docs/browser/useBroadcastChannel.mdx
index 0f4db6f2..268cd988 100644
--- a/packages/website-docusaurus/docs/browser/useBroadcastChannel.mdx
+++ b/packages/website-docusaurus/docs/browser/useBroadcastChannel.mdx
@@ -46,7 +46,7 @@ function Demo() {
       {error && <p>Error: {error.message}</p>}
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useClipboard.mdx b/packages/website-docusaurus/docs/browser/useClipboard.mdx
index 0069fede..a2d3f6c4 100644
--- a/packages/website-docusaurus/docs/browser/useClipboard.mdx
+++ b/packages/website-docusaurus/docs/browser/useClipboard.mdx
@@ -6,7 +6,6 @@ Copy text to a user's clipboard
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [value, setValue] = useState("");
   const [text, copy] = useClipboard();
@@ -30,7 +29,7 @@ function Demo() {
       <button onClick={() => copy(value)}>Copy</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useCssVar.mdx b/packages/website-docusaurus/docs/browser/useCssVar.mdx
index bb7c40dd..b6b8f7f7 100644
--- a/packages/website-docusaurus/docs/browser/useCssVar.mdx
+++ b/packages/website-docusaurus/docs/browser/useCssVar.mdx
@@ -5,7 +5,6 @@ Manipulate CSS variables
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const key = "--color";
   const ref = useRef<HTMLDivElement>(null);
@@ -32,8 +31,8 @@ function Demo() {
       <button onClick={switchColor}>Change Color</button>
     </section>
   );
-}
+};
 
 ```
 
-%%API%%
\ No newline at end of file
+%%API%%
diff --git a/packages/website-docusaurus/docs/browser/useDarkMode.mdx b/packages/website-docusaurus/docs/browser/useDarkMode.mdx
index 30ec4a31..1930421b 100644
--- a/packages/website-docusaurus/docs/browser/useDarkMode.mdx
+++ b/packages/website-docusaurus/docs/browser/useDarkMode.mdx
@@ -92,7 +92,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useDevicePixelRatio.mdx b/packages/website-docusaurus/docs/browser/useDevicePixelRatio.mdx
index ab178121..95504018 100644
--- a/packages/website-docusaurus/docs/browser/useDevicePixelRatio.mdx
+++ b/packages/website-docusaurus/docs/browser/useDevicePixelRatio.mdx
@@ -9,7 +9,7 @@ function Demo() {
   const { pixelRatio } = useDevicePixelRatio();
 
   return <p>Device pixel ratio: {pixelRatio}</p>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useElementByPoint.mdx b/packages/website-docusaurus/docs/browser/useElementByPoint.mdx
index 2755cc85..70ac564b 100644
--- a/packages/website-docusaurus/docs/browser/useElementByPoint.mdx
+++ b/packages/website-docusaurus/docs/browser/useElementByPoint.mdx
@@ -61,7 +61,7 @@ function Demo() {
       </div>
     </>
   );
-}
+};
 
 render(<Demo />);
 
diff --git a/packages/website-docusaurus/docs/browser/useEventSource.mdx b/packages/website-docusaurus/docs/browser/useEventSource.mdx
index 11fb1da0..dfd3d57c 100644
--- a/packages/website-docusaurus/docs/browser/useEventSource.mdx
+++ b/packages/website-docusaurus/docs/browser/useEventSource.mdx
@@ -21,7 +21,7 @@ function Demo() {
       <button onClick={close}>Close</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useEyeDropper.mdx b/packages/website-docusaurus/docs/browser/useEyeDropper.mdx
index 16a675d0..ada3e281 100644
--- a/packages/website-docusaurus/docs/browser/useEyeDropper.mdx
+++ b/packages/website-docusaurus/docs/browser/useEyeDropper.mdx
@@ -6,7 +6,6 @@ Use [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [color, setColor] = useState("");
   const [supported, open] = useEyeDropper();
@@ -28,7 +27,7 @@ function Demo() {
   }
 
   return <span>Not Supported by Your Browser</span>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useFavicon.mdx b/packages/website-docusaurus/docs/browser/useFavicon.mdx
index f626bad5..bc980d4d 100644
--- a/packages/website-docusaurus/docs/browser/useFavicon.mdx
+++ b/packages/website-docusaurus/docs/browser/useFavicon.mdx
@@ -5,7 +5,6 @@ React side-effect hook sets the favicon of the page
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const logo = 'https://react.dev/favicon.ico';
   const twitter = 'https://twitter.com/favicon.ico';
@@ -30,7 +29,7 @@ function Demo() {
       </button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useFetchEventSource.mdx b/packages/website-docusaurus/docs/browser/useFetchEventSource.mdx
index 442da200..d131ad95 100644
--- a/packages/website-docusaurus/docs/browser/useFetchEventSource.mdx
+++ b/packages/website-docusaurus/docs/browser/useFetchEventSource.mdx
@@ -348,7 +348,7 @@ function Demo() {
       <div>Data: {JSON.stringify(data)}</div>
     </div>
   );
-}
+};
 
 ```
 
@@ -383,7 +383,7 @@ function Demo() {
       <button onClick={close}>Close</button>
     </div>
   );
-}
+};
 
 ```
 
@@ -413,7 +413,7 @@ function Demo() {
       <div>Latest message: {JSON.stringify(data)}</div>
     </div>
   );
-}
+};
 
 ```
 
@@ -437,7 +437,7 @@ function Demo() {
       <div>Data: {JSON.stringify(data)}</div>
     </div>
   );
-}
+};
 
 ```
 
@@ -479,7 +479,7 @@ function Demo() {
       <div>Latest Message: {data?.message}</div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useFileDialog.mdx b/packages/website-docusaurus/docs/browser/useFileDialog.mdx
index b16b2935..9d48ccf5 100644
--- a/packages/website-docusaurus/docs/browser/useFileDialog.mdx
+++ b/packages/website-docusaurus/docs/browser/useFileDialog.mdx
@@ -6,7 +6,6 @@ Open file dialog with ease
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [files, open, reset] = useFileDialog();
 
@@ -34,7 +33,7 @@ function Demo() {
       )}
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useFps.mdx b/packages/website-docusaurus/docs/browser/useFps.mdx
index 83a0b198..bf28aa4b 100644
--- a/packages/website-docusaurus/docs/browser/useFps.mdx
+++ b/packages/website-docusaurus/docs/browser/useFps.mdx
@@ -6,12 +6,11 @@ React Sensor Hooks that tracks FPS (frames per second)
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const fps = useFps();
 
   return <div>FPS: {fps}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useFullscreen.mdx b/packages/website-docusaurus/docs/browser/useFullscreen.mdx
index 4b85c075..7b7fa257 100644
--- a/packages/website-docusaurus/docs/browser/useFullscreen.mdx
+++ b/packages/website-docusaurus/docs/browser/useFullscreen.mdx
@@ -6,7 +6,6 @@ Display an element full-screen
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef(null);
   const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }]
@@ -33,7 +32,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useGeolocation.mdx b/packages/website-docusaurus/docs/browser/useGeolocation.mdx
index c8583774..6166f7a6 100644
--- a/packages/website-docusaurus/docs/browser/useGeolocation.mdx
+++ b/packages/website-docusaurus/docs/browser/useGeolocation.mdx
@@ -8,7 +8,6 @@ It allows the user to provide their location to web applications if they so desi
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const { coordinates, locatedAt, error } = useGeolocation();
 
@@ -35,7 +34,7 @@ function Demo() {
       </pre>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useIdle.mdx b/packages/website-docusaurus/docs/browser/useIdle.mdx
index dff09747..9da903b5 100644
--- a/packages/website-docusaurus/docs/browser/useIdle.mdx
+++ b/packages/website-docusaurus/docs/browser/useIdle.mdx
@@ -6,7 +6,6 @@ React sensor hook that tracks if user on the page is idle
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isIdle = useIdle(3e3);
 
@@ -15,7 +14,7 @@ function Demo() {
       <div>User is idle: {isIdle ? "Yes 😴" : "Nope"}</div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useInfiniteScroll.mdx b/packages/website-docusaurus/docs/browser/useInfiniteScroll.mdx
index 37989cd5..23cf8d91 100644
--- a/packages/website-docusaurus/docs/browser/useInfiniteScroll.mdx
+++ b/packages/website-docusaurus/docs/browser/useInfiniteScroll.mdx
@@ -6,7 +6,6 @@ Infinite scrolling of the element
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef<HTMLDivElement>(null);
   const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
@@ -36,7 +35,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useKeyModifier.mdx b/packages/website-docusaurus/docs/browser/useKeyModifier.mdx
index 22dbc934..8eb98747 100644
--- a/packages/website-docusaurus/docs/browser/useKeyModifier.mdx
+++ b/packages/website-docusaurus/docs/browser/useKeyModifier.mdx
@@ -6,7 +6,6 @@ React Sensor Hook that tracks state of any of the [supported modifiers](https://
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const Button = (props: { mode: boolean; name: string }) => {
     const { mode, name } = props;
@@ -38,7 +37,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useLocationSelector.mdx b/packages/website-docusaurus/docs/browser/useLocationSelector.mdx
index 2ee192c9..3f6b9d4c 100644
--- a/packages/website-docusaurus/docs/browser/useLocationSelector.mdx
+++ b/packages/website-docusaurus/docs/browser/useLocationSelector.mdx
@@ -7,7 +7,6 @@ For more information, [see](https://thisweekinreact.com/articles/useSyncExternal
 ## Usage
 
 ```tsx live noInline
-
 function CurrentPathname() {
   const pathname = useLocationSelector(location => location.pathname);
   const ref = useRef(0);
@@ -36,7 +35,7 @@ function CurrentHash() {
       <div>hashRender: {ref.current}</div>
     </div>
   );
-}
+};
 
 function Links() {
   return (
@@ -46,7 +45,7 @@ function Links() {
       <a href="#link3">#link3</a>
     </div>
   );
-}
+};
 
 function Demo() {
   return (
@@ -56,9 +55,9 @@ function Demo() {
       <Links />
     </div>
   );
-}
+};
 
-render(<Demo/>)
+render(<Demo/>);
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useLongPress.mdx b/packages/website-docusaurus/docs/browser/useLongPress.mdx
index d9efaefa..2b264650 100644
--- a/packages/website-docusaurus/docs/browser/useLongPress.mdx
+++ b/packages/website-docusaurus/docs/browser/useLongPress.mdx
@@ -6,7 +6,6 @@ React sensor hook that fires a callback after long pressing
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [state, setState] = useState("No Press");
   const onLongPress = () => {
@@ -26,7 +25,7 @@ function Demo() {
       <div>Pressed: {state}</div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useMediaDevices.mdx b/packages/website-docusaurus/docs/browser/useMediaDevices.mdx
index 06b2d7e8..528bff21 100644
--- a/packages/website-docusaurus/docs/browser/useMediaDevices.mdx
+++ b/packages/website-docusaurus/docs/browser/useMediaDevices.mdx
@@ -6,14 +6,13 @@ React sensor hook that tracks connected hardware devices
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [state] = useMediaDevices({
     requestPermissions: true,
   });
 
   return <pre>{JSON.stringify(state, null, 2)}</pre>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useMediaQuery.mdx b/packages/website-docusaurus/docs/browser/useMediaQuery.mdx
index 9a87d87e..3e3ae1ce 100644
--- a/packages/website-docusaurus/docs/browser/useMediaQuery.mdx
+++ b/packages/website-docusaurus/docs/browser/useMediaQuery.mdx
@@ -5,12 +5,11 @@ Ease with media query
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isWide = useMediaQuery("(min-width: 480px)");
 
   return <div>Screen is wide: {isWide ? "Yes" : "No"}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useMobileLandscape.mdx b/packages/website-docusaurus/docs/browser/useMobileLandscape.mdx
index df9d348a..6e778c10 100644
--- a/packages/website-docusaurus/docs/browser/useMobileLandscape.mdx
+++ b/packages/website-docusaurus/docs/browser/useMobileLandscape.mdx
@@ -5,11 +5,10 @@ React hook that returns `true` if the mobile device is in landscape mode and `fa
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isMobileLandscape = useMobileLandscape();
   return <p>isMobileLandscape: {JSON.stringify(isMobileLandscape)}</p>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useMouse.mdx b/packages/website-docusaurus/docs/browser/useMouse.mdx
index dc69aa93..ec882bcf 100644
--- a/packages/website-docusaurus/docs/browser/useMouse.mdx
+++ b/packages/website-docusaurus/docs/browser/useMouse.mdx
@@ -6,7 +6,6 @@ React sensor hooks that track cursor positio
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const mouse = useMouse();
 
@@ -23,7 +22,7 @@ function Demo() {
       </p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useMousePressed.mdx b/packages/website-docusaurus/docs/browser/useMousePressed.mdx
index 0b43a3a6..a676d1e0 100644
--- a/packages/website-docusaurus/docs/browser/useMousePressed.mdx
+++ b/packages/website-docusaurus/docs/browser/useMousePressed.mdx
@@ -8,7 +8,6 @@ Triggered by mousedown touchstart on target element and released by mouseup mous
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [mouse, type] = useMousePressed();
 
@@ -18,7 +17,7 @@ function Demo() {
       <p>SourceType: {JSON.stringify(type)}</p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useNetwork.mdx b/packages/website-docusaurus/docs/browser/useNetwork.mdx
index 3921b052..fa4175d8 100644
--- a/packages/website-docusaurus/docs/browser/useNetwork.mdx
+++ b/packages/website-docusaurus/docs/browser/useNetwork.mdx
@@ -8,12 +8,11 @@ As of the standard it is not guaranteed that browser connected to the Internet,
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const state = useNetwork();
 
   return <pre>{JSON.stringify(state, null, 2)}</pre>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useObjectUrl.mdx b/packages/website-docusaurus/docs/browser/useObjectUrl.mdx
index 41bf1bef..299e691e 100644
--- a/packages/website-docusaurus/docs/browser/useObjectUrl.mdx
+++ b/packages/website-docusaurus/docs/browser/useObjectUrl.mdx
@@ -6,7 +6,6 @@ Creates an URL for the provided `File`, `Blob`, or `MediaSource` via [URL.create
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [file, setFile] = useState<File>();
   const url = useObjectUrl(file);
@@ -24,7 +23,7 @@ function Demo() {
       <div>{url}</div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useOnline.mdx b/packages/website-docusaurus/docs/browser/useOnline.mdx
index f13f0833..6cebe222 100644
--- a/packages/website-docusaurus/docs/browser/useOnline.mdx
+++ b/packages/website-docusaurus/docs/browser/useOnline.mdx
@@ -6,11 +6,10 @@ A wrapper of `useNetwork`
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const online = useOnline();
   return <div>{JSON.stringify(online)}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useOrientation.mdx b/packages/website-docusaurus/docs/browser/useOrientation.mdx
index 97c886f6..b0259704 100644
--- a/packages/website-docusaurus/docs/browser/useOrientation.mdx
+++ b/packages/website-docusaurus/docs/browser/useOrientation.mdx
@@ -5,12 +5,11 @@ React sensor hook that tracks screen orientation of user's device.
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [state] = useOrientation();
 
   return <pre>{JSON.stringify(state, null, 2)}</pre>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/usePageLeave.mdx b/packages/website-docusaurus/docs/browser/usePageLeave.mdx
index 132e0006..81d4ace2 100644
--- a/packages/website-docusaurus/docs/browser/usePageLeave.mdx
+++ b/packages/website-docusaurus/docs/browser/usePageLeave.mdx
@@ -6,12 +6,11 @@ React sensor hook that tracks when mouse leaves the page
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isLeft = usePageLeave();
 
   return <div>isLeft: {JSON.stringify(isLeft)}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/usePermission.mdx b/packages/website-docusaurus/docs/browser/usePermission.mdx
index e352928b..876c4b80 100644
--- a/packages/website-docusaurus/docs/browser/usePermission.mdx
+++ b/packages/website-docusaurus/docs/browser/usePermission.mdx
@@ -6,12 +6,11 @@ React side-effect hook to query permission status of browser APIs
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const state = usePermission({ name: "microphone" });
 
   return <pre>{JSON.stringify(state, null, 2)}</pre>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/usePlatform.mdx b/packages/website-docusaurus/docs/browser/usePlatform.mdx
index 8e8a84f2..738d14be 100644
--- a/packages/website-docusaurus/docs/browser/usePlatform.mdx
+++ b/packages/website-docusaurus/docs/browser/usePlatform.mdx
@@ -5,12 +5,11 @@ React hook to tracked the platform of the user.
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const {platform} = usePlatform();
 
   return <p>platfrom: {platform}</p>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/usePreferredColorScheme.mdx b/packages/website-docusaurus/docs/browser/usePreferredColorScheme.mdx
index 870403d0..ac837cda 100644
--- a/packages/website-docusaurus/docs/browser/usePreferredColorScheme.mdx
+++ b/packages/website-docusaurus/docs/browser/usePreferredColorScheme.mdx
@@ -6,12 +6,11 @@
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const color = usePreferredColorScheme();
 
   return <div>PreferredColorScheme: {color}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/usePreferredContrast.mdx b/packages/website-docusaurus/docs/browser/usePreferredContrast.mdx
index 59be5940..118fbfec 100644
--- a/packages/website-docusaurus/docs/browser/usePreferredContrast.mdx
+++ b/packages/website-docusaurus/docs/browser/usePreferredContrast.mdx
@@ -6,12 +6,11 @@
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const contrast = usePreferredContrast();
 
   return <div>PreferredContrast: {contrast}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/usePreferredDark.mdx b/packages/website-docusaurus/docs/browser/usePreferredDark.mdx
index 9741e1bc..60e27c81 100644
--- a/packages/website-docusaurus/docs/browser/usePreferredDark.mdx
+++ b/packages/website-docusaurus/docs/browser/usePreferredDark.mdx
@@ -6,12 +6,11 @@ React Hook that tracks dark theme preference
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isDark = usePreferredDark(false);
 
   return <div>PreferredDark: {JSON.stringify(isDark)}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/usePreferredLanguages.mdx b/packages/website-docusaurus/docs/browser/usePreferredLanguages.mdx
index 5af69572..57f800c0 100644
--- a/packages/website-docusaurus/docs/browser/usePreferredLanguages.mdx
+++ b/packages/website-docusaurus/docs/browser/usePreferredLanguages.mdx
@@ -8,7 +8,7 @@
 function Demo() {
   const preferredLanguages = usePreferredLanguages();
   return <div>PreferredLanguages: {JSON.stringify(preferredLanguages)}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useReducedMotion.mdx b/packages/website-docusaurus/docs/browser/useReducedMotion.mdx
index 759c2682..89895b8e 100644
--- a/packages/website-docusaurus/docs/browser/useReducedMotion.mdx
+++ b/packages/website-docusaurus/docs/browser/useReducedMotion.mdx
@@ -6,12 +6,11 @@ React Hook that tracks motion preference
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const motion = useReducedMotion(false);
 
   return <div>ReducedMotion: {JSON.stringify(motion)}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useScreenSafeArea.mdx b/packages/website-docusaurus/docs/browser/useScreenSafeArea.mdx
index cf242b49..9f6208f7 100644
--- a/packages/website-docusaurus/docs/browser/useScreenSafeArea.mdx
+++ b/packages/website-docusaurus/docs/browser/useScreenSafeArea.mdx
@@ -7,7 +7,6 @@ React sensor hook that tracks `env(safe-area-inset-*)`
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [top, right, bottom, left] = useScreenSafeArea();
   return (
@@ -26,8 +25,8 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
-%%API%%
\ No newline at end of file
+%%API%%
diff --git a/packages/website-docusaurus/docs/browser/useScriptTag.mdx b/packages/website-docusaurus/docs/browser/useScriptTag.mdx
index 41fa794c..c96bcb68 100644
--- a/packages/website-docusaurus/docs/browser/useScriptTag.mdx
+++ b/packages/website-docusaurus/docs/browser/useScriptTag.mdx
@@ -6,7 +6,6 @@ Script tag injecting
 ## Usage
 
 ```tsx live
-
 // it's an example, use your types instead
 
 // Add this if you are using TypeScript
@@ -24,7 +23,7 @@ function Demo() {
   }, [status]);
 
   return <div>jQuery version: {version}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useScroll.mdx b/packages/website-docusaurus/docs/browser/useScroll.mdx
index ae097d0e..838d4c00 100644
--- a/packages/website-docusaurus/docs/browser/useScroll.mdx
+++ b/packages/website-docusaurus/docs/browser/useScroll.mdx
@@ -6,7 +6,6 @@ React Sensor Hook that tracks scroll position and stat
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const elementRef = useRef<HTMLDivElement>(null);
   const [x, y, isScrolling, arrivedState, directions] = useScroll(elementRef);
@@ -113,7 +112,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useScrollIntoView.mdx b/packages/website-docusaurus/docs/browser/useScrollIntoView.mdx
index cf0c75be..60fd7962 100644
--- a/packages/website-docusaurus/docs/browser/useScrollIntoView.mdx
+++ b/packages/website-docusaurus/docs/browser/useScrollIntoView.mdx
@@ -6,7 +6,6 @@ React sensor hook works like `element.scrollIntoView()
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const targetRef = useRef<HTMLParagraphElement>(null);
   const { scrollIntoView } = useScrollIntoView(targetRef, {
@@ -22,8 +21,8 @@ function Demo() {
       <p ref={targetRef}>Hello there</p>
     </div>
   );
-}
+};
 
 ```
 
-%%API%%
\ No newline at end of file
+%%API%%
diff --git a/packages/website-docusaurus/docs/browser/useScrollLock.mdx b/packages/website-docusaurus/docs/browser/useScrollLock.mdx
index 5bc10ade..f6ec5b32 100644
--- a/packages/website-docusaurus/docs/browser/useScrollLock.mdx
+++ b/packages/website-docusaurus/docs/browser/useScrollLock.mdx
@@ -6,7 +6,6 @@ Lock scrolling of the element
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const elementRef = useRef<HTMLDivElement>(null);
   const [locked, setLocked] = useScrollLock(elementRef);
@@ -99,7 +98,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useTextDirection.mdx b/packages/website-docusaurus/docs/browser/useTextDirection.mdx
index 17ebd8b3..02316c1c 100644
--- a/packages/website-docusaurus/docs/browser/useTextDirection.mdx
+++ b/packages/website-docusaurus/docs/browser/useTextDirection.mdx
@@ -6,7 +6,6 @@ change [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
 ## Usage
 
 ```tsx live noInline
-
 function Demo() {
   const [dir, setDir] = useTextDirection({
     selector: "#_useTextDirectionDemo",
@@ -36,7 +35,7 @@ function Demo() {
   );
 };
 
-render(<Demo/>)
+render(<Demo/>);
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useTitle.mdx b/packages/website-docusaurus/docs/browser/useTitle.mdx
index d91945d0..d1bf02b6 100644
--- a/packages/website-docusaurus/docs/browser/useTitle.mdx
+++ b/packages/website-docusaurus/docs/browser/useTitle.mdx
@@ -5,7 +5,6 @@ set document title.
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [title, setTitle] = useState("title");
 
@@ -16,7 +15,7 @@ function Demo() {
       <button onClick={() => setTitle("newTitle")}>Change Title</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/browser/useWebNotification.mdx b/packages/website-docusaurus/docs/browser/useWebNotification.mdx
index c1c79884..6b2f8e8d 100644
--- a/packages/website-docusaurus/docs/browser/useWebNotification.mdx
+++ b/packages/website-docusaurus/docs/browser/useWebNotification.mdx
@@ -10,7 +10,6 @@ Attention: For users on the Mac system, it is necessary for them to have enabled
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const { isSupported, show, close }
     = useWebNotification(true);
@@ -35,8 +34,8 @@ function Demo() {
           )}
     </div>
   );
-}
+};
 
 ```
 
-%%API%%
\ No newline at end of file
+%%API%%
diff --git a/packages/website-docusaurus/docs/effect/useAsyncEffect.mdx b/packages/website-docusaurus/docs/effect/useAsyncEffect.mdx
index 5a1e26ce..e6fb394d 100644
--- a/packages/website-docusaurus/docs/effect/useAsyncEffect.mdx
+++ b/packages/website-docusaurus/docs/effect/useAsyncEffect.mdx
@@ -6,7 +6,6 @@ React useEffect with async await support. Note it don't support generator functi
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [data, setData] = useState(0);
 
@@ -23,7 +22,7 @@ function Demo() {
     [],
   );
   return <div>data: {data}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useCustomCompareEffect.mdx b/packages/website-docusaurus/docs/effect/useCustomCompareEffect.mdx
index a612fcd5..e3d5e2b6 100644
--- a/packages/website-docusaurus/docs/effect/useCustomCompareEffect.mdx
+++ b/packages/website-docusaurus/docs/effect/useCustomCompareEffect.mdx
@@ -6,7 +6,6 @@ A modified useEffect hook that accepts a comparator which is used for comparison
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [person, setPerson] = useState({ name: "bob", id: 1 });
   const [count, setCount] = useState(0);
@@ -37,7 +36,7 @@ function Demo() {
       <p>useCustomCompareEffect with deep comparison: {count}</p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useDebounceFn.mdx b/packages/website-docusaurus/docs/effect/useDebounceFn.mdx
index 7510050f..680f835d 100644
--- a/packages/website-docusaurus/docs/effect/useDebounceFn.mdx
+++ b/packages/website-docusaurus/docs/effect/useDebounceFn.mdx
@@ -6,7 +6,6 @@ React hooks that [debounce](https://lodash.com/docs/4.17.15#debounce) function
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [value, setValue] = useState(0);
   const { run } = useDebounceFn(() => {
@@ -21,7 +20,7 @@ function Demo() {
       </button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useDeepCompareEffect.mdx b/packages/website-docusaurus/docs/effect/useDeepCompareEffect.mdx
index 6545ce05..6f0c5060 100644
--- a/packages/website-docusaurus/docs/effect/useDeepCompareEffect.mdx
+++ b/packages/website-docusaurus/docs/effect/useDeepCompareEffect.mdx
@@ -6,7 +6,6 @@ A modified useEffect hook that is using deep comparison on its dependencies inst
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [count, setCount] = useState(0);
   const effectCountRef = useRef(0);
@@ -35,7 +34,7 @@ function Demo() {
       </p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useEvent.mdx b/packages/website-docusaurus/docs/effect/useEvent.mdx
index 99fced5a..b17f3b76 100644
--- a/packages/website-docusaurus/docs/effect/useEvent.mdx
+++ b/packages/website-docusaurus/docs/effect/useEvent.mdx
@@ -6,7 +6,6 @@ Basic implementation of [React RFC useEvent](https://github.com/reactjs/rfcs/pul
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [count, setCount] = useState(0);
 
@@ -39,7 +38,7 @@ function Demo() {
       </div>
     </>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useEventEmitter.mdx b/packages/website-docusaurus/docs/effect/useEventEmitter.mdx
index 858e06a2..71bcc9c3 100644
--- a/packages/website-docusaurus/docs/effect/useEventEmitter.mdx
+++ b/packages/website-docusaurus/docs/effect/useEventEmitter.mdx
@@ -6,7 +6,6 @@ A basic eventemitter
 ## Usage
 
 ```tsx live noInline
-
 function Demo() {
   const [state, setState] = useState(0);
   const [event, fire, dispose] = useEventEmitter<number>();
@@ -29,7 +28,7 @@ function Demo() {
   );
 };
 
-render(<Demo/>)
+render(<Demo/>);
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useEventListener.mdx b/packages/website-docusaurus/docs/effect/useEventListener.mdx
index 815af4b2..ab8fe0b9 100644
--- a/packages/website-docusaurus/docs/effect/useEventListener.mdx
+++ b/packages/website-docusaurus/docs/effect/useEventListener.mdx
@@ -5,7 +5,6 @@ Use EventListener with ease.
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [state, setState] = useState("NO DB Click");
@@ -40,7 +39,7 @@ function Demo() {
       <button ref={buttonRef}>Click me</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useInterval.mdx b/packages/website-docusaurus/docs/effect/useInterval.mdx
index 77b495a8..2110e7e8 100644
--- a/packages/website-docusaurus/docs/effect/useInterval.mdx
+++ b/packages/website-docusaurus/docs/effect/useInterval.mdx
@@ -7,7 +7,6 @@ You can also manually control it by passing the `controls` parameter.
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [count, setCount] = useState(0);
 
@@ -16,7 +15,7 @@ function Demo() {
   }, 1000);
 
   return <div>count: {count}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useIsomorphicLayoutEffect.mdx b/packages/website-docusaurus/docs/effect/useIsomorphicLayoutEffect.mdx
index b37cfea5..f0a5ed95 100644
--- a/packages/website-docusaurus/docs/effect/useIsomorphicLayoutEffect.mdx
+++ b/packages/website-docusaurus/docs/effect/useIsomorphicLayoutEffect.mdx
@@ -5,7 +5,6 @@
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [value] = useState("useIsomorphicLayoutEffect");
   useIsomorphicLayoutEffect(() => {
@@ -13,7 +12,7 @@ function Demo() {
   }, [value]);
 
   return <div>{value}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useMount.mdx b/packages/website-docusaurus/docs/effect/useMount.mdx
index 5ea8e362..b0472184 100644
--- a/packages/website-docusaurus/docs/effect/useMount.mdx
+++ b/packages/website-docusaurus/docs/effect/useMount.mdx
@@ -6,14 +6,13 @@ React lifecycle hook that executes a function after the component is mounted
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [value, setValue] = useState("UnMounted");
   useMount(() => {
     setValue("Mounted");
   });
   return <div>{value}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useOnceEffect.mdx b/packages/website-docusaurus/docs/effect/useOnceEffect.mdx
index 01f8a6ad..c73a2add 100644
--- a/packages/website-docusaurus/docs/effect/useOnceEffect.mdx
+++ b/packages/website-docusaurus/docs/effect/useOnceEffect.mdx
@@ -6,7 +6,6 @@ A Hook that avoids React18 useEffect run twice
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [effect, setEffect] = useState(0);
   const [onceEffect, setOnceEffect] = useState(0);
@@ -26,7 +25,7 @@ function Demo() {
       <div>effect: {effect}</div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useOnceLayoutEffect.mdx b/packages/website-docusaurus/docs/effect/useOnceLayoutEffect.mdx
index e27be44b..c6e8396f 100644
--- a/packages/website-docusaurus/docs/effect/useOnceLayoutEffect.mdx
+++ b/packages/website-docusaurus/docs/effect/useOnceLayoutEffect.mdx
@@ -6,7 +6,6 @@ A Hook that avoids React18 useLayoutEffect run twice
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [updateEffect, setLayoutEffect] = useState(0);
   const [onceLayoutEffect, setOnceLayoutEffect] = useState(0);
@@ -26,7 +25,7 @@ function Demo() {
       <div>effect: {updateEffect}</div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useRafFn.mdx b/packages/website-docusaurus/docs/effect/useRafFn.mdx
index 2f54a8a0..e80d8b49 100644
--- a/packages/website-docusaurus/docs/effect/useRafFn.mdx
+++ b/packages/website-docusaurus/docs/effect/useRafFn.mdx
@@ -6,7 +6,6 @@ Call function on every [requestAnimationFrame](https://developer.mozilla.org/en-
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [ticks, setTicks] = useState(0);
   const [lastCall, setLastCall] = useState(0);
@@ -32,7 +31,7 @@ function Demo() {
       </button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useThrottleFn.mdx b/packages/website-docusaurus/docs/effect/useThrottleFn.mdx
index fe2d4702..10d39540 100644
--- a/packages/website-docusaurus/docs/effect/useThrottleFn.mdx
+++ b/packages/website-docusaurus/docs/effect/useThrottleFn.mdx
@@ -6,7 +6,6 @@ React hooks that [throttle](https://lodash.com/docs/4.17.15#throttle) function
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [value, setValue] = useState(0);
   const { run } = useThrottleFn(() => {
@@ -21,7 +20,7 @@ function Demo() {
       </button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useTimeout.mdx b/packages/website-docusaurus/docs/effect/useTimeout.mdx
index 43c0358c..b3f32d51 100644
--- a/packages/website-docusaurus/docs/effect/useTimeout.mdx
+++ b/packages/website-docusaurus/docs/effect/useTimeout.mdx
@@ -6,7 +6,6 @@ Update value after a given time
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [isPending, start, cancel] = useTimeout(5000);
 
@@ -29,7 +28,7 @@ function Demo() {
       </button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useTimeoutFn.mdx b/packages/website-docusaurus/docs/effect/useTimeoutFn.mdx
index 806316b8..b97e8af8 100644
--- a/packages/website-docusaurus/docs/effect/useTimeoutFn.mdx
+++ b/packages/website-docusaurus/docs/effect/useTimeoutFn.mdx
@@ -6,7 +6,6 @@ Wrapper for setTimeout with controls
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [text, setText] = useState("Please wait for 3 seconds");
   const [isPending, start] = useTimeoutFn(
@@ -30,7 +29,7 @@ function Demo() {
       </button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useUnmount.mdx b/packages/website-docusaurus/docs/effect/useUnmount.mdx
index 98193634..5f7e4452 100644
--- a/packages/website-docusaurus/docs/effect/useUnmount.mdx
+++ b/packages/website-docusaurus/docs/effect/useUnmount.mdx
@@ -6,14 +6,13 @@ React lifecycle hook that calls a function when the component will unmount
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [value] = useState("mounted");
   useUnmount(() => {
     alert("UnMounted");
   });
   return <div>{value}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useUpdate.mdx b/packages/website-docusaurus/docs/effect/useUpdate.mdx
index 237ba6e6..a3f11287 100644
--- a/packages/website-docusaurus/docs/effect/useUpdate.mdx
+++ b/packages/website-docusaurus/docs/effect/useUpdate.mdx
@@ -6,7 +6,6 @@ React utility hook that returns a function that forces component to re-render wh
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const update = useUpdate();
 
@@ -17,7 +16,7 @@ function Demo() {
       <button onClick={update}>Update</button>
     </>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useUpdateEffect.mdx b/packages/website-docusaurus/docs/effect/useUpdateEffect.mdx
index ac8251a0..278adb49 100644
--- a/packages/website-docusaurus/docs/effect/useUpdateEffect.mdx
+++ b/packages/website-docusaurus/docs/effect/useUpdateEffect.mdx
@@ -6,7 +6,6 @@ React effect hook that ignores the first invocation (e.g. on mount). The signatu
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [count, setCount] = useState(0);
   const [effectCount, setEffectCount] = useState(0);
@@ -34,7 +33,7 @@ function Demo() {
       </p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/effect/useUpdateLayoutEffect.mdx b/packages/website-docusaurus/docs/effect/useUpdateLayoutEffect.mdx
index bbd35cec..2a614e3c 100644
--- a/packages/website-docusaurus/docs/effect/useUpdateLayoutEffect.mdx
+++ b/packages/website-docusaurus/docs/effect/useUpdateLayoutEffect.mdx
@@ -6,7 +6,6 @@ React layoutEffect hook that ignores the first invocation (e.g. on mount). The s
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [count, setCount] = useState(0);
   const [layoutEffectCount, setLayoutEffectCount] = useState(0);
@@ -34,7 +33,7 @@ function Demo() {
       </p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useActiveElement.mdx b/packages/website-docusaurus/docs/element/useActiveElement.mdx
index 85171c25..2c6bace3 100644
--- a/packages/website-docusaurus/docs/element/useActiveElement.mdx
+++ b/packages/website-docusaurus/docs/element/useActiveElement.mdx
@@ -6,7 +6,6 @@ React Sensor Hooks that tracks document.activeElement
 ## Usage
 
 ```tsx live noInline
-
 function Demo() {
   const arr = [1, 2, 3, 4, 5, 6];
 
@@ -37,7 +36,7 @@ function Demo() {
   );
 };
 
-render(<Demo/>)
+render(<Demo/>);
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useClickOutside.mdx b/packages/website-docusaurus/docs/element/useClickOutside.mdx
index bcf5faf6..1f7ad9af 100644
--- a/packages/website-docusaurus/docs/element/useClickOutside.mdx
+++ b/packages/website-docusaurus/docs/element/useClickOutside.mdx
@@ -6,7 +6,6 @@ Listen for clicks outside of an element. Useful for modal or dropdown
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [visible, setVisible] = useState(false);
 
@@ -55,8 +54,8 @@ function Demo() {
       )}
     </div>
   );
-}
+};
 
 ```
 
-%%API%%
\ No newline at end of file
+%%API%%
diff --git a/packages/website-docusaurus/docs/element/useDocumentVisibility.mdx b/packages/website-docusaurus/docs/element/useDocumentVisibility.mdx
index e471648c..cf334b2d 100644
--- a/packages/website-docusaurus/docs/element/useDocumentVisibility.mdx
+++ b/packages/website-docusaurus/docs/element/useDocumentVisibility.mdx
@@ -6,7 +6,6 @@ React Sensor Hook that tracks [document.visibilityState](https://developer.mozil
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const visibility = useDocumentVisibility("hidden");
   const [message, setMessage] = useState(
@@ -27,8 +26,8 @@ function Demo() {
   }, [visibility]);
 
   return <div>{message}</div>;
-}
+};
 
 ```
 
-%%API%%
\ No newline at end of file
+%%API%%
diff --git a/packages/website-docusaurus/docs/element/useDoubleClick.mdx b/packages/website-docusaurus/docs/element/useDoubleClick.mdx
index 6d32586f..6652a533 100644
--- a/packages/website-docusaurus/docs/element/useDoubleClick.mdx
+++ b/packages/website-docusaurus/docs/element/useDoubleClick.mdx
@@ -6,7 +6,6 @@ React sensor hook that controls double click and single click
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const element = useRef<HTMLButtonElement>(null);
   const [text, setText] = useState("no click");
@@ -26,7 +25,7 @@ function Demo() {
       <p>{text}</p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useDraggable.mdx b/packages/website-docusaurus/docs/element/useDraggable.mdx
index 078538d1..3c4ff53b 100644
--- a/packages/website-docusaurus/docs/element/useDraggable.mdx
+++ b/packages/website-docusaurus/docs/element/useDraggable.mdx
@@ -44,7 +44,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
@@ -105,7 +105,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useDropZone.mdx b/packages/website-docusaurus/docs/element/useDropZone.mdx
index 77109317..7b5caf1a 100644
--- a/packages/website-docusaurus/docs/element/useDropZone.mdx
+++ b/packages/website-docusaurus/docs/element/useDropZone.mdx
@@ -6,7 +6,6 @@ Create an zone where files can be dropped
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -30,7 +29,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useElementBounding.mdx b/packages/website-docusaurus/docs/element/useElementBounding.mdx
index c476d13d..3cbf1404 100644
--- a/packages/website-docusaurus/docs/element/useElementBounding.mdx
+++ b/packages/website-docusaurus/docs/element/useElementBounding.mdx
@@ -6,7 +6,6 @@ React Element Hook that tracks bounding box of an HTML element
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef<HTMLTextAreaElement>(null);
   const rect = useElementBounding(ref);
@@ -16,7 +15,7 @@ function Demo() {
       <textarea ref={ref} readOnly value={JSON.stringify(rect, null, 2)} />
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useElementSize.mdx b/packages/website-docusaurus/docs/element/useElementSize.mdx
index 9a54456d..f11f3e5d 100644
--- a/packages/website-docusaurus/docs/element/useElementSize.mdx
+++ b/packages/website-docusaurus/docs/element/useElementSize.mdx
@@ -6,7 +6,6 @@ React Sensor Hook that tracks size of an HTML element. [ResizeObserver MDN](http
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef<HTMLTextAreaElement>(null);
 
@@ -24,7 +23,7 @@ function Demo() {
       />
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useElementVisibility.mdx b/packages/website-docusaurus/docs/element/useElementVisibility.mdx
index 4fe5a3cf..95ee2f88 100644
--- a/packages/website-docusaurus/docs/element/useElementVisibility.mdx
+++ b/packages/website-docusaurus/docs/element/useElementVisibility.mdx
@@ -6,7 +6,6 @@ React Element Hooks that tracks the visibility of an element within the viewport
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef<HTMLDivElement>(null);
   const [visible, stop] = useElementVisibility(ref);
@@ -46,7 +45,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useFocus.mdx b/packages/website-docusaurus/docs/element/useFocus.mdx
index 1ad1f4c3..cbf116c8 100644
--- a/packages/website-docusaurus/docs/element/useFocus.mdx
+++ b/packages/website-docusaurus/docs/element/useFocus.mdx
@@ -6,7 +6,6 @@ React Sensor Hooks that tracks element foucs state
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const text = useRef<HTMLParagraphElement>(null);
   const input = useRef<HTMLInputElement>(null);
@@ -59,7 +58,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useIntersectionObserver.mdx b/packages/website-docusaurus/docs/element/useIntersectionObserver.mdx
index 1505e7e4..c971d7d3 100644
--- a/packages/website-docusaurus/docs/element/useIntersectionObserver.mdx
+++ b/packages/website-docusaurus/docs/element/useIntersectionObserver.mdx
@@ -64,7 +64,7 @@ function Demo() {
       <Spacer />
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useMeasure.mdx b/packages/website-docusaurus/docs/element/useMeasure.mdx
index e48200e2..46f56be7 100644
--- a/packages/website-docusaurus/docs/element/useMeasure.mdx
+++ b/packages/website-docusaurus/docs/element/useMeasure.mdx
@@ -6,7 +6,6 @@ React sensor hook that tracks dimensions of an HTML element using the Resize Obs
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef<HTMLTextAreaElement>(null);
   const [rect, stop] = useMeasure(ref);
@@ -26,7 +25,7 @@ function Demo() {
       />
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useMutationObserver.mdx b/packages/website-docusaurus/docs/element/useMutationObserver.mdx
index eddd04ff..b9344881 100644
--- a/packages/website-docusaurus/docs/element/useMutationObserver.mdx
+++ b/packages/website-docusaurus/docs/element/useMutationObserver.mdx
@@ -43,7 +43,7 @@ function Demo() {
       <p>Mutation count {count}</p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useResizeObserver.mdx b/packages/website-docusaurus/docs/element/useResizeObserver.mdx
index 4ca53890..ee7730c0 100644
--- a/packages/website-docusaurus/docs/element/useResizeObserver.mdx
+++ b/packages/website-docusaurus/docs/element/useResizeObserver.mdx
@@ -6,7 +6,6 @@ Watch size of an HTML element. [ResizeObserver MDN](https://developer.mozilla.or
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef<HTMLTextAreaElement>(null);
   const [width, setWidth] = useState(0);
@@ -33,7 +32,7 @@ function Demo() {
       />
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useSticky.mdx b/packages/website-docusaurus/docs/element/useSticky.mdx
index ce71dcce..9dc530be 100644
--- a/packages/website-docusaurus/docs/element/useSticky.mdx
+++ b/packages/website-docusaurus/docs/element/useSticky.mdx
@@ -38,7 +38,7 @@ function Demo() {
       <div style={{ height: "100vh" }} />
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useWindowFocus.mdx b/packages/website-docusaurus/docs/element/useWindowFocus.mdx
index 49207d75..17f887dc 100644
--- a/packages/website-docusaurus/docs/element/useWindowFocus.mdx
+++ b/packages/website-docusaurus/docs/element/useWindowFocus.mdx
@@ -6,7 +6,6 @@ React Element Hook that tracks window focus with `window.onfocus` and `window.on
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const focus = useWindowsFocus();
   return (
@@ -18,7 +17,7 @@ function Demo() {
       </p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useWindowScroll.mdx b/packages/website-docusaurus/docs/element/useWindowScroll.mdx
index 89233c6c..d8fa62c8 100644
--- a/packages/website-docusaurus/docs/element/useWindowScroll.mdx
+++ b/packages/website-docusaurus/docs/element/useWindowScroll.mdx
@@ -26,7 +26,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/element/useWindowSize.mdx b/packages/website-docusaurus/docs/element/useWindowSize.mdx
index 05ca2215..90365bcb 100644
--- a/packages/website-docusaurus/docs/element/useWindowSize.mdx
+++ b/packages/website-docusaurus/docs/element/useWindowSize.mdx
@@ -6,7 +6,6 @@ React Element Hooks that tracks window size
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const { width, height } = useWindowSize();
 
@@ -17,7 +16,7 @@ function Demo() {
       </p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/integrations/useQRCode.mdx b/packages/website-docusaurus/docs/integrations/useQRCode.mdx
index 7bd27148..aea69e0f 100644
--- a/packages/website-docusaurus/docs/integrations/useQRCode.mdx
+++ b/packages/website-docusaurus/docs/integrations/useQRCode.mdx
@@ -30,7 +30,7 @@ function Demo() {
       {qrCode && <img src={qrCode} alt="QR Code" />}
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/use.mdx b/packages/website-docusaurus/docs/state/use.mdx
index 1bcca697..c23c28df 100644
--- a/packages/website-docusaurus/docs/state/use.mdx
+++ b/packages/website-docusaurus/docs/state/use.mdx
@@ -1,6 +1,7 @@
 # use
 
 `use` is a polyfill hook to resolve promises state for React v18 and below. Note that it only implements the ability to consume promises.
+For React v19 and above, you can use the built-in `use` hook: https://react.dev/reference/react/use
 
 ## Usage
 
@@ -15,13 +16,14 @@ function Demo() {
   const data = use(promise);
 
   return <p>{data}</p>;
-}
+};
 
 render(
   <Suspense fallback="loading...">
     <Demo />
   </Suspense>
 );
+
 ```
 
-%%API%%
\ No newline at end of file
+%%API%%
diff --git a/packages/website-docusaurus/docs/state/useControlled.mdx b/packages/website-docusaurus/docs/state/useControlled.mdx
index b99cd37c..a937dc86 100644
--- a/packages/website-docusaurus/docs/state/useControlled.mdx
+++ b/packages/website-docusaurus/docs/state/useControlled.mdx
@@ -29,7 +29,7 @@ function Demo() {
       <input value={value1} onChange={handleChange1} />
     </>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useCookie.mdx b/packages/website-docusaurus/docs/state/useCookie.mdx
index 14707e86..edb45103 100644
--- a/packages/website-docusaurus/docs/state/useCookie.mdx
+++ b/packages/website-docusaurus/docs/state/useCookie.mdx
@@ -53,7 +53,7 @@ function Demo() {
       <button onClick={refreshCookie}>Refresh the cookie</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useCountDown.mdx b/packages/website-docusaurus/docs/state/useCountDown.mdx
index a07026dc..26f6c26e 100644
--- a/packages/website-docusaurus/docs/state/useCountDown.mdx
+++ b/packages/website-docusaurus/docs/state/useCountDown.mdx
@@ -6,7 +6,6 @@ React State Hooks that return the minutes gracefull
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const now = new Date();
   const tomorrow = new Date();
@@ -20,7 +19,7 @@ function Demo() {
   return (
     <div suppressHydrationWarning={true}>{`${hour}:${minute}:${second}`}</div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useCounter.mdx b/packages/website-docusaurus/docs/state/useCounter.mdx
index d7e5e5a6..18b1c905 100644
--- a/packages/website-docusaurus/docs/state/useCounter.mdx
+++ b/packages/website-docusaurus/docs/state/useCounter.mdx
@@ -6,7 +6,6 @@ React state hook that tracks a numeric value
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [current, set, inc, dec, reset] = useCounter(10, 100, 1);
 
@@ -47,7 +46,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useCycleList.mdx b/packages/website-docusaurus/docs/state/useCycleList.mdx
index 8f9d65f0..b03c12ae 100644
--- a/packages/website-docusaurus/docs/state/useCycleList.mdx
+++ b/packages/website-docusaurus/docs/state/useCycleList.mdx
@@ -6,7 +6,6 @@ Cycle through a list of items
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [state, next, prev] = useCycleList([
     "Dog",
@@ -28,7 +27,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useDebounce.mdx b/packages/website-docusaurus/docs/state/useDebounce.mdx
index 31ec6421..be2f61dd 100644
--- a/packages/website-docusaurus/docs/state/useDebounce.mdx
+++ b/packages/website-docusaurus/docs/state/useDebounce.mdx
@@ -6,7 +6,6 @@ React hooks that [debounce](https://lodash.com/docs/4.17.15#debounce) value
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [value, setValue] = useState<string>("");
   const debouncedValue = useDebounce(value, 500);
@@ -22,7 +21,7 @@ function Demo() {
       <p style={{ marginTop: 16 }}>DebouncedValue: {debouncedValue}</p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useDisclosure.mdx b/packages/website-docusaurus/docs/state/useDisclosure.mdx
index 27889209..beba0944 100644
--- a/packages/website-docusaurus/docs/state/useDisclosure.mdx
+++ b/packages/website-docusaurus/docs/state/useDisclosure.mdx
@@ -15,7 +15,7 @@ function Demo() {
       <p>{isOpen ? "Open" : "Close"}</p>
     </>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useFirstMountState.mdx b/packages/website-docusaurus/docs/state/useFirstMountState.mdx
index 2482d199..442f62da 100644
--- a/packages/website-docusaurus/docs/state/useFirstMountState.mdx
+++ b/packages/website-docusaurus/docs/state/useFirstMountState.mdx
@@ -6,7 +6,6 @@ React state hook that returns true if component is just mounted
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isFirstMount = useFirstMountState();
   const [render, reRender] = useState(0);
@@ -18,7 +17,7 @@ function Demo() {
       <button onClick={() => reRender(1)}>{render}</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useHover.mdx b/packages/website-docusaurus/docs/state/useHover.mdx
index 0d155f22..1ac1378c 100644
--- a/packages/website-docusaurus/docs/state/useHover.mdx
+++ b/packages/website-docusaurus/docs/state/useHover.mdx
@@ -7,12 +7,11 @@ Detect if mouse is over given element.
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef<HTMLDivElement>(null);
   const hovered = useHover(ref);
   return <div ref={ref}> {hovered ? "true" : "false"}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useLatest.mdx b/packages/website-docusaurus/docs/state/useLatest.mdx
index 28be6b6e..436cf529 100644
--- a/packages/website-docusaurus/docs/state/useLatest.mdx
+++ b/packages/website-docusaurus/docs/state/useLatest.mdx
@@ -8,7 +8,6 @@ This is mostly useful to get access to the latest value of some props or state i
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [count, setCount] = useState(0);
   const latestCount = useLatest(count);
@@ -25,7 +24,7 @@ function Demo() {
       <button onClick={handleAlertClick}>Show alert</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useLocalStorage.mdx b/packages/website-docusaurus/docs/state/useLocalStorage.mdx
index 736d024e..7bede38c 100644
--- a/packages/website-docusaurus/docs/state/useLocalStorage.mdx
+++ b/packages/website-docusaurus/docs/state/useLocalStorage.mdx
@@ -6,7 +6,6 @@ React side-effect hook that manages a single `localStorage` key
 ## Usage
 
 ```tsx live
-
 function Demo() {
   // bind string
   const [value, setValue] = useLocalStorage("my-key", "key");
@@ -20,7 +19,7 @@ function Demo() {
       <button onClick={() => setValue(null)}>Remove</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useMergedRefs.mdx b/packages/website-docusaurus/docs/state/useMergedRefs.mdx
index 2af81bee..43bb84de 100644
--- a/packages/website-docusaurus/docs/state/useMergedRefs.mdx
+++ b/packages/website-docusaurus/docs/state/useMergedRefs.mdx
@@ -51,7 +51,7 @@ function Demo() {
   );
 };
 
-render(<Demo/>)
+render(<Demo/>);
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useMountedState.mdx b/packages/website-docusaurus/docs/state/useMountedState.mdx
index 81cff5e0..2dff3329 100644
--- a/packages/website-docusaurus/docs/state/useMountedState.mdx
+++ b/packages/website-docusaurus/docs/state/useMountedState.mdx
@@ -7,7 +7,6 @@ Returns a function that will return `true` if component mounted and `false` othe
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isMounted = useMountedState();
 
@@ -16,7 +15,7 @@ function Demo() {
     update(1);
   }, []);
   return <div>This component is {isMounted() ? "MOUNTED" : "NOT MOUNTED"}</div>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/usePrevious.mdx b/packages/website-docusaurus/docs/state/usePrevious.mdx
index 480a8eb5..9d88ab62 100644
--- a/packages/website-docusaurus/docs/state/usePrevious.mdx
+++ b/packages/website-docusaurus/docs/state/usePrevious.mdx
@@ -6,7 +6,6 @@ React state hook that returns the previous state as described in the [React Docs
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [count, setCount] = useState(0);
   const prevCount = usePrevious(count);
@@ -20,7 +19,7 @@ function Demo() {
       </p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useRafState.mdx b/packages/website-docusaurus/docs/state/useRafState.mdx
index 1aaef556..2f749d3d 100644
--- a/packages/website-docusaurus/docs/state/useRafState.mdx
+++ b/packages/website-docusaurus/docs/state/useRafState.mdx
@@ -6,7 +6,6 @@ React state hook that only updates state in the callback of [requestAnimationFra
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [state, setState] = useRafState({ x: 0, y: 0 });
 
@@ -31,7 +30,7 @@ function Demo() {
   });
 
   return <pre>{JSON.stringify(state, null, 2)}</pre>;
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useSessionStorage.mdx b/packages/website-docusaurus/docs/state/useSessionStorage.mdx
index 15688c94..af65ab4f 100644
--- a/packages/website-docusaurus/docs/state/useSessionStorage.mdx
+++ b/packages/website-docusaurus/docs/state/useSessionStorage.mdx
@@ -6,7 +6,6 @@ React side-effect hook that manages a single `sessionStorage` key
 ## Usage
 
 ```tsx live
-
 function Demo() {
   // bind string
   const [value, setValue] = useSessionStorage("my-key", "key");
@@ -20,7 +19,7 @@ function Demo() {
       <button onClick={() => setValue(null)}>Remove</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useSetState.mdx b/packages/website-docusaurus/docs/state/useSetState.mdx
index 364b9ee2..37701c19 100644
--- a/packages/website-docusaurus/docs/state/useSetState.mdx
+++ b/packages/website-docusaurus/docs/state/useSetState.mdx
@@ -6,7 +6,6 @@ useState wrapper to work with state like in class component
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [state, setState] = useSetState({ value1: "value1", value2: "value2" });
   const { value1, value2 } = state;
@@ -25,7 +24,7 @@ function Demo() {
       </button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useSupported.mdx b/packages/website-docusaurus/docs/state/useSupported.mdx
index 7560ef3c..bb141011 100644
--- a/packages/website-docusaurus/docs/state/useSupported.mdx
+++ b/packages/website-docusaurus/docs/state/useSupported.mdx
@@ -6,7 +6,6 @@ Check to see if your browser supports some feature
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isSupported = useSupported(() => "EyeDropper" in window);
   return (
@@ -17,7 +16,7 @@ function Demo() {
       </p>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useTextSelection.mdx b/packages/website-docusaurus/docs/state/useTextSelection.mdx
index 3535047c..6d6f401b 100644
--- a/packages/website-docusaurus/docs/state/useTextSelection.mdx
+++ b/packages/website-docusaurus/docs/state/useTextSelection.mdx
@@ -6,7 +6,6 @@ Track user text selection based on [document.getSelection](https://developer.moz
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const selection = useTextSelection();
 
@@ -20,7 +19,7 @@ function Demo() {
       <div>Selected text: {selection?.toString()}</div>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useThrottle.mdx b/packages/website-docusaurus/docs/state/useThrottle.mdx
index 3ddd2d08..5e99a1f5 100644
--- a/packages/website-docusaurus/docs/state/useThrottle.mdx
+++ b/packages/website-docusaurus/docs/state/useThrottle.mdx
@@ -6,7 +6,6 @@ React hooks that [throttle](https://lodash.com/docs/4.17.15#throttle) value
 ## Usage
 
 ```tsx live noInline
-
 function Demo() {
   const [value, setValue] = useState<string>();
   const throttledValue = useThrottle(value, 500);
@@ -24,7 +23,7 @@ function Demo() {
   );
 };
 
-render(<Demo/>)
+render(<Demo/>);
 
 ```
 
diff --git a/packages/website-docusaurus/docs/state/useToggle.mdx b/packages/website-docusaurus/docs/state/useToggle.mdx
index 2e81df3c..622efc35 100644
--- a/packages/website-docusaurus/docs/state/useToggle.mdx
+++ b/packages/website-docusaurus/docs/state/useToggle.mdx
@@ -5,7 +5,6 @@ React state hook that tracks value of a boolean
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [on, toggle] = useToggle(true);
 
@@ -17,7 +16,7 @@ function Demo() {
       <button onClick={() => toggle(false)}>set OFF</button>
     </div>
   );
-}
+};
 
 ```
 
diff --git a/packages/website-docusaurus/src/theme/Playground/index.tsx b/packages/website-docusaurus/src/theme/Playground/index.tsx
new file mode 100644
index 00000000..1dfb0864
--- /dev/null
+++ b/packages/website-docusaurus/src/theme/Playground/index.tsx
@@ -0,0 +1,141 @@
+import React from "react";
+import clsx from "clsx";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
+import Translate from "@docusaurus/Translate";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import {
+  ErrorBoundaryErrorMessageFallback,
+  usePrismTheme,
+} from "@docusaurus/theme-common";
+import ErrorBoundary from "@docusaurus/ErrorBoundary";
+
+import type { Props } from "@theme/Playground";
+import type { ThemeConfig } from "@docusaurus/theme-live-codeblock";
+
+import styles from "./styles.module.css";
+
+function Header({ children }: { children: React.ReactNode }) {
+  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
+}
+
+function LivePreviewLoader() {
+  // Is it worth improving/translating?
+  // eslint-disable-next-line @docusaurus/no-untranslated-text
+  return <div>Loading...</div>;
+}
+
+function Preview() {
+  // No SSR for the live preview
+  // See https://github.com/facebook/docusaurus/issues/5747
+  return (
+    <BrowserOnly fallback={<LivePreviewLoader />}>
+      {() => (
+        <>
+          <ErrorBoundary
+            fallback={(params) => (
+              <ErrorBoundaryErrorMessageFallback {...params} />
+            )}
+          >
+            <LivePreview />
+          </ErrorBoundary>
+          <LiveError />
+        </>
+      )}
+    </BrowserOnly>
+  );
+}
+
+function ResultWithHeader() {
+  return (
+    <>
+      <Header>
+        <Translate
+          id="theme.Playground.result"
+          description="The result label of the live codeblocks"
+        >
+          Result
+        </Translate>
+      </Header>
+      {/* https://github.com/facebook/docusaurus/issues/5747 */}
+      <div className={styles.playgroundPreview}>
+        <Preview />
+      </div>
+    </>
+  );
+}
+
+function ThemedLiveEditor() {
+  const isBrowser = useIsBrowser();
+  return (
+    <LiveEditor
+      // We force remount the editor on hydration,
+      // otherwise dark prism theme is not applied
+      key={String(isBrowser)}
+      className={styles.playgroundEditor}
+    />
+  );
+}
+
+function EditorWithHeader() {
+  return (
+    <>
+      <Header>
+        <Translate
+          id="theme.Playground.liveEditor"
+          description="The live editor label of the live codeblocks"
+        >
+          Live Editor
+        </Translate>
+      </Header>
+      <ThemedLiveEditor />
+    </>
+  );
+}
+
+// this should rather be a stable function
+// see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
+// Removed the ; at the end of the line
+// see: https://github.com/FormidableLabs/react-live/issues/403
+const DEFAULT_TRANSFORM_CODE = (code: string) => `${code}`;
+
+export default function Playground({
+  children,
+  transformCode,
+  ...props
+}: Props): JSX.Element {
+  const {
+    siteConfig: { themeConfig },
+  } = useDocusaurusContext();
+  const {
+    liveCodeBlock: { playgroundPosition },
+  } = themeConfig as ThemeConfig;
+  const prismTheme = usePrismTheme();
+
+  const noInline = props.metastring?.includes("noInline") ?? false;
+
+  return (
+    <div className={styles.playgroundContainer}>
+      <LiveProvider
+        code={children?.replace(/\n$/, "")}
+        noInline={noInline}
+        transformCode={transformCode ?? DEFAULT_TRANSFORM_CODE}
+        theme={prismTheme}
+        {...props}
+      >
+        {playgroundPosition === "top" ? (
+          <>
+            <ResultWithHeader />
+            <EditorWithHeader />
+          </>
+        ) : (
+          <>
+            <EditorWithHeader />
+            <ResultWithHeader />
+          </>
+        )}
+      </LiveProvider>
+    </div>
+  );
+}
diff --git a/packages/website-docusaurus/src/theme/Playground/styles.module.css b/packages/website-docusaurus/src/theme/Playground/styles.module.css
new file mode 100644
index 00000000..d107439f
--- /dev/null
+++ b/packages/website-docusaurus/src/theme/Playground/styles.module.css
@@ -0,0 +1,33 @@
+.playgroundContainer {
+  margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: hidden;
+}
+
+.playgroundHeader {
+  letter-spacing: 0.08rem;
+  padding: 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-content);
+  font-size: var(--ifm-code-font-size);
+}
+
+.playgroundHeader:first-of-type {
+  background: var(--ifm-color-emphasis-600);
+  color: var(--ifm-color-content-inverse);
+}
+
+.playgroundEditor {
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
+  /* rtl:ignore */
+  direction: ltr;
+}
+
+.playgroundPreview {
+  padding: 1rem;
+  background-color: var(--ifm-pre-background);
+}