fix(playground): console scroll to bottom (#9153)

mdn · Jun 23, 2023 · 85871bb · 85871bb
1 parent 0caebd9
commit 85871bb
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/client/src/playground/console.tsx b/client/src/playground/console.tsx
@@ -1,13 +1,22 @@
+import { useEffect, useRef } from "react";
+
 export interface VConsole {
   prop: string;
   message: string;
 }
 
 export function Console({ vConsole }: { vConsole: VConsole[] }) {
+  const consoleUl = useRef<HTMLUListElement | null>(null);
+  const scrollToBottom = () => {
+    consoleUl.current?.scrollTo({ top: consoleUl.current?.scrollHeight });
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [vConsole]);
   return (
     <div id="play-console">
       <span>Console</span>
-      <ul>
+      <ul ref={consoleUl}>
         {vConsole.map(({ prop, message }, i) => {
           return (
             <li key={i}>