{"id":18488197,"url":"https://github.com/bony2023/react-terminal","last_synced_at":"2025-05-15T01:04:23.854Z","repository":{"id":37868524,"uuid":"229393615","full_name":"bony2023/react-terminal","owner":"bony2023","description":"🚀 React component that renders a Terminal 🖥","archived":false,"fork":false,"pushed_at":"2025-05-02T17:37:29.000Z","size":3549,"stargazers_count":353,"open_issues_count":29,"forks_count":68,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-13T19:21:06.873Z","etag":null,"topics":["async","javascript","props","react","terminal","webapp"],"latest_commit_sha":null,"homepage":"https://react-terminal.surge.sh/","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/bony2023.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"bony2023"}},"created_at":"2019-12-21T07:31:52.000Z","updated_at":"2025-05-11T22:23:58.000Z","dependencies_parsed_at":"2023-12-18T05:37:30.821Z","dependency_job_id":"5640cb81-3552-49b6-8c9f-9eada765e529","html_url":"https://github.com/bony2023/react-terminal","commit_stats":{"total_commits":193,"total_committers":8,"mean_commits":24.125,"dds":"0.46113989637305697","last_synced_commit":"b9a33161cd71ed65030558456383235d6053a794"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bony2023%2Freact-terminal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bony2023%2Freact-terminal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bony2023%2Freact-terminal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bony2023%2Freact-terminal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bony2023","download_url":"https://codeload.github.com/bony2023/react-terminal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254021831,"owners_count":22001005,"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":["async","javascript","props","react","terminal","webapp"],"created_at":"2024-11-06T12:51:24.129Z","updated_at":"2025-05-15T01:04:23.845Z","avatar_url":"https://github.com/bony2023.png","language":"TypeScript","funding_links":["https://github.com/sponsors/bony2023"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://react-terminal.sirv.com/static/terminal-logo-text.png\" data-canonical-src=\"https://react-terminal.sirv.com/static/terminal-logo-text.png\" width=\"145\" height=\"50\" /\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e🚀 React component that renders a Terminal 🖥\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/bony2023/react-terminal/actions?query=Build+and+Test\"\u003e\u003cimg src=\"https://github.com/bony2023/react-terminal/workflows/Build%20and%20Test/badge.svg\" data-canonical-src=\"https://github.com/bony2023/react-terminal/workflows/Build%20and%20Test/badge.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/bony2023/react-terminal\"\u003e\u003cimg src=\"https://codecov.io/gh/bony2023/react-terminal/branch/main/graph/badge.svg?token=xt1kdpvlam\" data-canonical-src=\"https://codecov.io/gh/bony2023/react-terminal/branch/main/graph/badge.svg?token=xt1kdpvlam\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-terminal\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-terminal/latest\" data-canonical-src=\"https://img.shields.io/npm/v/react-terminal/latest\"/\u003e\u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/react-terminal\" data-canonical-src=\"https://img.shields.io/npm/l/react-terminal\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e •\n  \u003ca href=\"#props\"\u003eProps\u003c/a\u003e •\n  \u003ca href=\"#report-a-bug\"\u003eReport a bug\u003c/a\u003e\n\u003c/p\u003e\n\n![Terminal png](https://react-terminal.sirv.com/static/terminal-dracula.png)\n\n## Looking for Sponsors/Contributors\nWhile my time is restricted, I'm still committed to this library. To help focus development, sponsorship is appreciated for urgent feature requests. I strongly encourage community contributions through pull requests. Feel free to submit them for any issues or new features, and I'll be happy to review them. Thank you!\n\n## Features\n- Mobile support. 📱\n- Customizable commands, prompt and error message. ✅\n- Support callbacks(async/non-async) for commands. 🔄\n- Command history using arrow up and down. 🔼\n- Support for copy/paste. 📋\n- In-built themes and support to create more. 🚀\n\n## Installation\nInstall package with NPM or YARN and add it to your development dependencies:\n```\nnpm install react-terminal\n```\nOR\n```\nyarn add react-terminal\n```\n\n## Usage\n\n```tsx\nimport { ReactTerminal } from \"react-terminal\";\n\nfunction App(props) {\n  // Define commands here\n  const commands = {\n    whoami: \"jackharper\",\n    cd: (directory) =\u003e `changed path to ${directory}`\n  };\n\n  return (\n    \u003cReactTerminal\n      commands={commands}\n    /\u003e\n  );\n}\n```\n\nAlso make sure to wrap the main mountpoint around the `TerminalContextProvider`. This retains the state even when the component is unmounted and then mounted back:\n\n```tsx\nimport { TerminalContextProvider } from \"react-terminal\";\n\nReactDOM.render(\n  \u003cTerminalContextProvider\u003e\n    \u003cApp/\u003e\n  \u003c/TerminalContextProvider\u003e,\n  rootElement\n);\n```\n\n## Creating custom themes\nThe component comes with few in-built themes: `light`, `dark`, `material-light`, `material-dark`, `material-ocean`, `matrix` and `dracula`. You can also create custom themes by passing `themes` parameter in props, as follows:\n\n```tsx\n\u003cReactTerminal\n  commands={commands}\n  themes={{\n    \"my-custom-theme\": {\n      themeBGColor: \"#272B36\",\n      themeToolbarColor: \"#DBDBDB\",\n      themeColor: \"#FFFEFC\",\n      themePromptColor: \"#a917a8\"\n    }\n  }}\n  theme=\"my-custom-theme\"\n/\u003e\n```\n\n## Props\n| name | description | default\n|--|--|--\n| `welcomeMessage` | A welcome message to show at the start, before the prompt begins. Value can be either a string or JSX | null\n| `prompt` | Terminal prompt | \u003e\u003e\u003e\n| `commands` | List of commands to be provided as a key value pair where value can be either a string, JSX/HTML tag or callback | null\n| `errorMessage` | Message to show when unidentified command executed, can be either a string, JSX/HTML tag or callback | \"not found!\"\n| `enableInput` | Whether to enable user input | true\n| `showControlBar` | Whether to show the top control bar | true\n| `showControlButtons` | Whether to show the control buttons at the top bar of the terminal | true\n| `theme` | Theme of the terminal | \"light\"\n| `themes` | Themes object to supply custom themes | null\n| `defaultHandler` | Default handler to be used (if provided) when no commands match. Useful when you don't know list of commands beforehand/want to send them to server for handling. | null\n\n## In-built commands\n| command | description |\n|--|--|\n| clear | clears the console |\n\n## Report a bug\nIf you found a bug in this library, please file an GitHub issue [here](https://github.com/bony2023/react-terminal/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbony2023%2Freact-terminal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbony2023%2Freact-terminal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbony2023%2Freact-terminal/lists"}