{"id":13566976,"url":"https://github.com/jonmbake/react-terminal-ui","last_synced_at":"2025-04-04T01:30:53.928Z","repository":{"id":38690191,"uuid":"280435941","full_name":"jonmbake/react-terminal-ui","owner":"jonmbake","description":"A terminal React component with support for light and dark modes.","archived":false,"fork":false,"pushed_at":"2025-01-25T13:45:30.000Z","size":767,"stargazers_count":238,"open_issues_count":9,"forks_count":36,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T05:06:38.371Z","etag":null,"topics":["dark-mode","design","javascript","light-mode","react","react-component","reactjs","terminal"],"latest_commit_sha":null,"homepage":"https://jonmbake.github.io/react-terminal-ui/demo/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonmbake.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-17T13:48:43.000Z","updated_at":"2025-03-19T11:45:43.000Z","dependencies_parsed_at":"2022-07-13T18:21:10.198Z","dependency_job_id":"cd37cc50-ea11-44f7-ae84-02fb447c5330","html_url":"https://github.com/jonmbake/react-terminal-ui","commit_stats":{"total_commits":157,"total_committers":4,"mean_commits":39.25,"dds":0.03821656050955413,"last_synced_commit":"3f650ad6d9c35466b2aa91f809c598f7d0757e32"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonmbake%2Freact-terminal-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonmbake%2Freact-terminal-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonmbake%2Freact-terminal-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonmbake%2Freact-terminal-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonmbake","download_url":"https://codeload.github.com/jonmbake/react-terminal-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247107816,"owners_count":20884793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-mode","design","javascript","light-mode","react","react-component","reactjs","terminal"],"created_at":"2024-08-01T13:02:20.695Z","updated_at":"2025-04-04T01:30:53.912Z","avatar_url":"https://github.com/jonmbake.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![CI](https://github.com/jonmbake/react-terminal-ui/workflows/CI/badge.svg)](https://github.com/jonmbake/react-terminal-ui/actions?query=workflow%3ACI)\n[![Jest Code Coverage Report](jest-code-coverage-report.svg)](https://jonmbake.github.io/react-terminal-ui/coverage/)\n[![Types TypeScript](types-type-script.svg)](https://github.com/jonmbake/react-terminal-ui/blob/gh-pages/index.d.ts)\n[![CodeQL Scan](codeql-scan.svg)](https://github.com/jonmbake/react-terminal-ui/security/code-scanning?query=tool%3ACodeQL)\n\n# React Terminal UI\nA terminal [React](https://github.com/facebook/react) component with support for light and dark modes. Styling is courtesy of [termynal.js](https://github.com/ines/termynal).\n\nCheck out the **[Demo](https://jonmbake.github.io/react-terminal-ui/demo/)** :heart_eyes:\n\n![React Terminal UI Demo Dark](https://github.com/jonmbake/screenshots/raw/master/react-terminal-ui/react-terminal-ui-demo-dark.png)\n\n![React Terminal UI Demo Light](https://github.com/jonmbake/screenshots/raw/master/react-terminal-ui/react-terminal-ui-demo-light.png)\n\n## Installation\n\n```\nnpm install --save react-terminal-ui\n```\n\n## Usage\n\nReact Terminal UI is a \"dumb component\"—it renders whatever props you pass in. Typically, you'll want a controller component to manage the terminal's state. For example:\n\n```jsx\nimport React, { useState } from 'react';\nimport Terminal, { ColorMode, TerminalOutput } from 'react-terminal-ui';\n\nconst TerminalController = () =\u003e {\n  const [terminalLineData, setTerminalLineData] = useState([\n    \u003cTerminalOutput\u003eWelcome to the React Terminal UI Demo!\u003c/TerminalOutput\u003e,\n  ]);\n\n  // Terminal has 100% width by default, so it should usually be wrapped in a container div\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003cTerminal\n        name=\"React Terminal Usage Example\"\n        colorMode={ColorMode.Light}\n        onInput={(terminalInput) =\u003e\n          console.log(`New terminal input received: '${terminalInput}'`)\n        }\n      \u003e\n        {terminalLineData}\n      \u003c/Terminal\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Component Props\n\n| Name                 | Description                                                                                                                                                                                                                            |\n|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `name`               | Name of the terminal. Displays at the top of the rendered component. In the demo, the name is set to React Terminal UI.                                                                                                                |\n| `colorMode`          | Terminal color mode—either Light or Dark. Defaults to Dark.                                                                                                                                                                            |\n| `onInput`            | An optional callback function that is invoked when a user presses enter on the prompt. The function is passed the current prompt input. If the `onInput` prop is not provided, the prompt input line will not display in the terminal. |\n| `startingInputValue` | Starting input value. If this prop changes, any user-entered input will be overridden by this value. Defaults to an empty string (`\"\"`).                                                                                               |\n| `prompt`             | The prompt character. Defaults to `$`.                                                                                                                                                                                                 |\n| `height`             | Height of the terminal. Defaults to `600px`.                                                                                                                                                                                           |\n| `redBtnCallback`     | Optional callback function for the red button. If provided, the function will be invoked when the red button is clicked.                                                                                                               |\n| `yellowBtnCallback`  | Optional callback function for the yellow button. If provided, the function will be invoked when the yellow button is clicked.                                                                                                         |\n| `greenBtnCallback`   | Optional callback function for the green button. If provided, the function will be invoked when the green button is clicked.                                                                                                           |\n| `TopButtonsPanel`    | Optional - way to control which buttons are displayed in the top buttons panel. Pass `TopButtonsPanel={()=\u003e null}` to hide top buttons panel.                                                                                          |\n\n\n### Development\n\nAfter running `npm install`, ensure that peer dependencies are installed by executing `npm run install-peers`.\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\nTermynal.js is also licensed under MIT, Copyright (C) 2017 Ines Montani.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonmbake%2Freact-terminal-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonmbake%2Freact-terminal-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonmbake%2Freact-terminal-ui/lists"}