Merge pull request #36 from pioneers/console

Add autoscroll feature on AppConsole.tsx

package.json

@@ -247,7 +247,7 @@
   "collective": {
     "url": "https://opencollective.com/electron-react-boilerplate-594"
   },
-  "devEngines": {
+  "engines": {
     "node": ">=14.x",
     "npm": ">=7.x"
   },

src/renderer/AppConsole.css

@@ -15,6 +15,7 @@
   margin: 0;
   margin-bottom: 50px;
   min-height: 0;
+  scroll-behavior: smooth;
 }
 .AppConsole-message {
   padding: 2px;

src/renderer/AppConsole.tsx

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from 'react';
 import AppConsoleMessage from '../common/AppConsoleMessage';
 import './AppConsole.css';
 
@@ -14,9 +15,18 @@ export default function AppConsole({
   height: number;
   messages: AppConsoleMessage[];
 }) {
+  // Add autoscroll feature to AppConsole by setting the current scrollTop prop to the current scrollHeight value
+  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}