diff --git a/client/src/playground/console.tsx b/client/src/playground/console.tsx index 8b2264043771..6a182d441a86 100644 --- 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}>