Step 01: Listening for selection change in a React component

src/components/SelectMenu.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const SelectMenu = () => {
+  useEffect(() => {
+    document.addEventListener('selectionchange', () => {
+      console.log('Selection Changed!')
+    });
+  }, []);
+
+  return null;
+}
+
+export default SelectMenu;

src/pages/index.astro

@@ -1,9 +1,12 @@
 ---
 import Layout from '@/layouts/Layout.astro';
 import Container from '@/components/Container.astro';
+import SelectMenu from '@/components/SelectMenu.tsx';
 ---
 <Layout title="The Evolution of JavaScript">
 	<Container class="prose">
+		<SelectMenu client:load />
+
 		<h1>The Evolution of JavaScript: From Browser Scripting to Full-Stack Dominance</h1>
 
 		<p>By ChatGPT</p>