jonmbake · jonmbake · Jan 1, 2026 · Dec 31, 2025 · Dec 31, 2025 · Dec 31, 2025
diff --git a/.github/workflows/main.yml → .github/workflows/ci.yaml b/.github/workflows/main.yml → .github/workflows/ci.yaml
@@ -4,7 +4,7 @@ on:
   pull_request:
   push:
     branches:
-      - 'master'
+      - 'main'
 
 jobs:
   build:
@@ -15,13 +15,16 @@ jobs:
       uses: actions/checkout@v2
 
     - name: Set up Node.js
-      uses: actions/setup-node@master
+      uses: actions/setup-node@v6
       with:
         node-version: 18.4.0
 
     - name: Install dependencies
       run: npm install && npm run install-peers
 
+    - name: Lint
+      run: npm run lint
+
     - name: Run tests
       run: npm test
 
@@ -34,15 +37,15 @@ jobs:
       run: npm run build
 
     - name: Copy type definition to docs
-      if: github.ref_name == 'master'
+      if: github.ref_name == 'main'
       run:  cp ./build/index.d.ts ./docs/
 
     - name: Perform CodeQL analysis
       uses: github/codeql-action/analyze@v2
 
     - name: Publish github pages docs
       uses: peaceiris/actions-gh-pages@v3
-      if: github.ref_name == 'master'
+      if: github.ref_name == 'main'
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
         publish_dir: ./docs

diff --git a/README.md b/README.md
@@ -8,9 +8,9 @@ A terminal [React](https://github.com/facebook/react) component with support for
 
 Check out the **[Demo](https://jonmbake.github.io/react-terminal-ui/demo/)** :heart_eyes:
 
-![React Terminal UI Demo Dark](https://github.com/jonmbake/screenshots/raw/master/react-terminal-ui/react-terminal-ui-demo-dark.png)
+![React Terminal UI Demo Dark](https://github.com/jonmbake/screenshots/raw/main/react-terminal-ui/react-terminal-ui-demo-dark.png)
 
-![React Terminal UI Demo Light](https://github.com/jonmbake/screenshots/raw/master/react-terminal-ui/react-terminal-ui-demo-light.png)
+![React Terminal UI Demo Light](https://github.com/jonmbake/screenshots/raw/main/react-terminal-ui/react-terminal-ui-demo-light.png)
 
 ## Installation
 

diff --git a/demo/index.html b/demo/index.html
@@ -10,8 +10,8 @@
   </head>
   <body>
     <div id="terminal"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js" integrity="sha512-SUJujhtUWZUlwsABaZNnTFRlvCu7XGBZBL1VF33qRvvgNk3pBS9E353kcag4JAv05/nsB9sanSXFbdHAUW9+lg==" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js" integrity="sha512-SYsXmAblZhruCNUVmTp5/v2a1Fnoia06iJh3+L9B9wUaqpRVjcNBQsqAglQG9b5+IaVCfLDH5+vW923JL5epZA==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/demo/index.tsx b/demo/index.tsx
@@ -1,20 +1,20 @@
 import React, { useState, MouseEvent } from 'react'
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Terminal, { ColorMode, TerminalInput, TerminalOutput } from '../src/index';
 
 import './style.css';
 
-const TerminalController = (props = {}) => {
+const TerminalController = () => {
   const [isPasswordMode, setIsPasswordMode] = useState<boolean>(false);
   const [colorMode, setColorMode] = useState(ColorMode.Dark);
   const [lineData, setLineData] = useState([
-    <TerminalOutput>Welcome to the React Terminal UI Demo!&#128075;</TerminalOutput>,
-    <TerminalOutput></TerminalOutput>,
-    <TerminalOutput>The following example commands are provided:</TerminalOutput>,
-    <TerminalOutput>'view-source' will navigate to the React Terminal UI github source.</TerminalOutput>,
-    <TerminalOutput>'view-react-docs' will navigate to the react docs.</TerminalOutput>,
-    <TerminalOutput>'login' will show input password with "*" instead of real string</TerminalOutput>,
-    <TerminalOutput>'clear' will clear the terminal.</TerminalOutput>,
+    <TerminalOutput key="welcome">Welcome to the React Terminal UI Demo!&#128075;</TerminalOutput>,
+    <TerminalOutput key="empty"></TerminalOutput>,
+    <TerminalOutput key="commands">The following example commands are provided:</TerminalOutput>,
+    <TerminalOutput key="view-source">&apos;view-source&apos; will navigate to the React Terminal UI github source.</TerminalOutput>,
+    <TerminalOutput key="view-react">&apos;view-react-docs&apos; will navigate to the react docs.</TerminalOutput>,
+    <TerminalOutput key="login">&apos;login&apos; will show input password with &quot;*&quot; instead of real string</TerminalOutput>,
+    <TerminalOutput key="clear">&apos;clear&apos; will clear the terminal.</TerminalOutput>,
   ]);
 
   function toggleColorMode(e: MouseEvent) {
@@ -85,9 +85,10 @@ const TerminalController = (props = {}) => {
   )
 };
 
-ReactDOM.render(
+const container = document.getElementById('terminal')!;
+const root = createRoot(container);
+root.render(
   <React.StrictMode>
     <TerminalController />
-  </React.StrictMode>,
-  document.getElementById('terminal')
+  </React.StrictMode>
 );
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,73 @@
+import js from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+      globals: {
+        window: 'readonly',
+        document: 'readonly',
+        console: 'readonly',
+        setTimeout: 'readonly',
+        clearTimeout: 'readonly',
+        localStorage: 'readonly',
+        HTMLDivElement: 'readonly',
+        HTMLInputElement: 'readonly',
+        HTMLElement: 'readonly',
+        Element: 'readonly',
+        EventListenerOrEventListenerObject: 'readonly',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      react,
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'no-undef': 'off', // TypeScript handles this
+      '@typescript-eslint/no-unused-vars': 'warn',
+      'react/jsx-key': 'warn',
+      'react/no-unescaped-entities': 'warn',
+      'react/no-deprecated': 'warn',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  {
+    files: ['tests/**/*.{ts,tsx}'],
+    languageOptions: {
+      globals: {
+        jest: 'readonly',
+        describe: 'readonly',
+        test: 'readonly',
+        expect: 'readonly',
+        beforeEach: 'readonly',
+        beforeAll: 'readonly',
+        afterEach: 'readonly',
+        afterAll: 'readonly',
+        it: 'readonly',
+      },
+    },
+  },
+];