Skip to content

Terminal is not full screen #525

@Thecode764

Description

@Thecode764

i want to make my terminal full screen:

i using vite.js with react.js

screenshot:

Screenshot-20250915-115318.png

code:

main.tsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import '/public/css/main.css'
import App from './App.tsx'
import { TerminalContextProvider } from "react-terminal";

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <TerminalContextProvider>
      <App />
    </TerminalContextProvider>
  </StrictMode>
)

App.tsx:

'use client'

import { ReactTerminal } from "react-terminal";

export default function App() {
  const commands = {
    whoami: () => "giterm",
  };

  const welcome = (
    <span>
      Welcome to Giterm! for start type <strong>help</strong><br/>
    </span>
  )
  return (
    <div>
          <div>
            <ReactTerminal
              commands={commands}
              welcomeMessage={welcome}
              prompt="git@giterm: $ "
              themes={{
                "matrix": {
                  themeBGColor: "#000000",
                  themeToolbarColor: "#808080",
                  themeColor: "#FFFEFC",
                  themePromptColor: " #36ba01",
                }
              }}
              theme="matrix"
              errorMessage="git: Command not found"
              enableInput={true}
              showControlBar={true}
              showControlButtons={true}
            />
          </div>
    </div>
  );
}

main.css:

@import "tailwindcss";

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions