Add autoscroll feature on AppConsole.tsx

pioneers · Nov 30, 2024 · 4706b76 · 4706b76
1 parent 4c80b70
commit 4706b76
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 2 deletions.
diff --git a/code.png b/code.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -247,7 +247,7 @@
   "collective": {
     "url": "https://opencollective.com/electron-react-boilerplate-594"
   },
-  "devEngines": {
+  "engines": {
     "node": ">=14.x",
     "npm": ">=7.x"
   },

diff --git a/src/renderer/AppConsole.css b/src/renderer/AppConsole.css
@@ -15,6 +15,7 @@
   margin: 0;
   margin-bottom: 50px;
   min-height: 0;
+  scroll-behavior: smooth;
 }
 .AppConsole-message {
   padding: 2px;

diff --git a/src/renderer/AppConsole.tsx b/src/renderer/AppConsole.tsx
@@ -1,3 +1,4 @@
+import { useRef, useEffect } from 'react';
 import AppConsoleMessage from '../common/AppConsoleMessage';
 import './AppConsole.css';
 
@@ -14,9 +15,17 @@ export default function AppConsole({
   height: number;
   messages: AppConsoleMessage[];
 }) {
+  const consoleRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (consoleRef.current) {
+      consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
+    }
+  }, [messages]);
+
   return (
     <div className="AppConsole" style={{ height }}>
-      <pre className="AppConsole-inner">
+      <pre ref={consoleRef} className="AppConsole-inner">
         {messages.map((msg: AppConsoleMessage) => (
           <div
             key={msg.uuid}