{"id":13394314,"url":"https://github.com/nitin42/terminal-in-react","last_synced_at":"2025-05-14T16:03:07.957Z","repository":{"id":38802616,"uuid":"96524786","full_name":"nitin42/terminal-in-react","owner":"nitin42","description":"👨‍💻  A component that renders a terminal","archived":false,"fork":false,"pushed_at":"2023-08-03T09:14:06.000Z","size":507,"stargazers_count":2148,"open_issues_count":41,"forks_count":150,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-09T21:08:27.507Z","etag":null,"topics":["css","design","javascript","react","svg","terminal","webapp","webpack"],"latest_commit_sha":null,"homepage":"http://terminal-in-react.surge.sh/","language":"JavaScript","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/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-07-07T09:49:19.000Z","updated_at":"2025-04-09T13:18:48.000Z","dependencies_parsed_at":"2024-01-06T02:01:55.192Z","dependency_job_id":"2e021449-8157-45f2-9b5d-6012ef7770d4","html_url":"https://github.com/nitin42/terminal-in-react","commit_stats":{"total_commits":294,"total_committers":12,"mean_commits":24.5,"dds":"0.41836734693877553","last_synced_commit":"d276b450df837cf80eb31fd80961895ea8977533"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Fterminal-in-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Fterminal-in-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Fterminal-in-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Fterminal-in-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/terminal-in-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248329706,"owners_count":21085588,"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":["css","design","javascript","react","svg","terminal","webapp","webpack"],"created_at":"2024-07-30T17:01:15.733Z","updated_at":"2025-04-12T01:54:16.531Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# Terminal in React\n[![Downloads][npm-dm]][package-url]\n[![Downloads][npm-dt]][package-url]\n[![NPM Version][npm-v]][package-url]\n[![Dependencies][deps]][package-url]\n[![Dev Dependencies][dev-deps]][package-url]\n[![License][license]][package-url]\n![size](https://img.shields.io/badge/size-31.4%20KB-brightgreen.svg)\n![size](https://img.shields.io/badge/gzip-8.63%20KB-brightgreen.svg)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/terminal-icon.png\"  width=\"300\" height=\"300\" /\u003e\n\u003c/p\u003e\n\n\u003e A component that renders a terminal\n\n## Table of contents\n\n* [Install](#install)\n\n* [Usage](#usage)\n\n* [Working](#working)\n\n* [Plugins](#using-plugins-)\n\n* [Features](#more-features)\n\n* [Customization](#customization)\n\n* [API reference](#api)\n\n* [Built-in commands](#built-in-commands)\n\n* [Where to use ?](#where-to-use-)\n\n* [Add a feature](#you-want-a-x-feature)\n\n* [Contributing](#contributing)\n\n* [Troubleshooting](#troubleshooting)\n\n* [Detailed reference](https://github.com/nitin42/terminal-in-react/wiki)\n\n## Install\n\n```\nnpm install terminal-in-react --save\n```\nor if you use `yarn`\n\n```\nyarn add terminal-in-react\n```\n\nThis package also depends on `react` so make sure you've already installed it.\n\n## Usage\n\n\n```jsx\nimport React, { Component } from 'react';\nimport Terminal from 'terminal-in-react';\n\nclass App extends Component {\n  showMsg = () =\u003e 'Hello World'\n\n  render() {\n    return (\n      \u003cdiv\n        style={{\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          height: \"100vh\"\n        }}\n      \u003e\n        \u003cTerminal\n          color='green'\n          backgroundColor='black'\n          barColor='black'\n          style={{ fontWeight: \"bold\", fontSize: \"1em\" }}\n          commands={{\n            'open-google': () =\u003e window.open('https://www.google.com/', '_blank'),\n            showmsg: this.showMsg,\n            popup: () =\u003e alert('Terminal in React')\n          }}\n          descriptions={{\n            'open-google': 'opens google.com',\n            showmsg: 'shows a message',\n            alert: 'alert', popup: 'alert'\n          }}\n          msg='You can write anything here. Example - Hello! My name is Foo and I like Bar.'\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n\u003e Be careful when copying this example because it uses `window` object (`'open-google': () =\u003e window.open(\"https://www.google.com/\", \"_blank\"),`) which is only available on the client-side and it will give you an error if you're doing server side rendering.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/a7e35f346b909349a02438ee17678956.gif\" /\u003e\n\u003c/p\u003e\n\n## Working\n\n### Adding commands ✍️\n\nTo add your own command, use prop `commands` which accepts an object. This objects then maps `command name -\u003e command function`.\n\nLet's take an example. You want to open a website with a command `open-google`\n\n```jsx\n\u003cTerminal commands={{ 'open-google': () =\u003e window.open(\"https://www.google.com/\", \"_blank\")}} /\u003e\n```\n\n### Adding description of your command 💁🏼‍♂️\n\nAdd a description of your command using prop `description`.\n\n```jsx\n\u003cTerminal descriptions={{ 'open-google': 'opens google' }} /\u003e\n```\n\n### Console logging\n\nYou can have the terminal watch console.log/info function and print out.\nIt does so by default.\n\n```jsx\n\u003cTerminal watchConsoleLogging /\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"http://g.recordit.co/a6D6PCtTcL.gif\"/\u003e\n\u003c/p\u003e\n\n### Command passthrough\n\nYou can have the terminal pass out the cmd that was input\n\n```jsx\n\u003cTerminal commandPassThrough={cmd =\u003e `-PassedThrough:${cmd}: command not found`} /\u003e\n```\n\n### Async handling of commands 😎\nyou can also handle the result with a callback\n```jsx\n\u003cTerminal\n  commandPassThrough={(cmd, print) =\u003e {\n    // do something async\n    print(`-PassedThrough:${cmd}: command not found`);\n  }}\n/\u003e\n```\n\n### Minimise, maximise and close the window\n\n```jsx\n\u003cTerminal\n  closedTitle='OOPS! You closed the window.'\n  closedMessage='Click on the icon to reopen.'\n/\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://camo.githubusercontent.com/3748e38abc72cb7860ba8f2272c0329ded5bfe23/687474703a2f2f672e7265636f726469742e636f2f5a5965554b6d62414e512e676966\" /\u003e\n\u003c/p\u003e\n\n### Hide the default options\n\n```jsx\n\u003cTerminal descriptions={{ color: false, show: false, clear: false }} /\u003e\n```\n\nThis will hide the option color, show and clear.\n\n\n### Advanced commands 👨‍💻\n\nYou can give your commands options and get them back parsed to the method.\nUsing this method will also give your command a build in help output.\nWith the option `-h` or `--help`.\n\n```jsx\n\u003cTerminal\n  commands={{\n    color: {\n      method: (args, print, runCommand) =\u003e {\n        print(`The color is ${args._[0] || args.color}`);\n      },\n      options: [\n        {\n          name: 'color',\n          description: 'The color the output should be',\n          defaultValue: 'white',\n        },\n      ],\n    },\n  }}\n/\u003e\n```\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/65468696bece70704bd8bcc50e6504e9.gif\"/\u003e\n\u003c/p\u003e\n\nThe command API has three parameters `arguments`, `print`, and `runCommand`.\n\n - `arguments` will be an array of the input split on spaces or and object with\n parameters meeting the options given as well as a `_` option with any strings given\n after the options.\n - `print` is a method to write a new line to the terminals output. Any string returned\n as a result of a command will also be printed.\n - `runCommand` is a method to call other commands it takes a string and will\n attempt to run the command given\n\nLet's take an another example -\n\n```jsx\n\u003cTerminal\n  commands={{\n    'type-text': (args, print, runCommand) =\u003e {\n      const text = args.slice(1).join(' ');\n      print('');\n      for (let i = 0; i \u003c text.length; i += 1) {\n        setTimeout(() =\u003e {\n          runCommand(`edit-line ${text.slice(0, i + 1)}`);\n        }, 100 * i);\n      }\n    }\n  }}\n/\u003e\n\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/ef2427464989b1ce14bc44bb4fc94689.gif\" /\u003e\n\u003c/p\u003e\n\n## Using plugins 🔥\n\n[Plugin Documentation](PLUGINS.md).\n\nWe have also developed a plugin system for the `\u003cTerminal /\u003e` component which helps you develop custom plugins. Here is one example of plugin which creates a fake file system called [terminal-in-react-pseudo-file-system-plugin](https://github.com/jcgertig/terminal-in-react-pseudo-file-system-plugin).\n\n### Instantiating the plugin\n\n```jsx\nimport pseudoFileSystem from 'terminal-in-react-pseudo-file-system-plugin';\nconst FileSystemPlugin = pseudoFileSystem();\n\n\u003cTerminal\n  plugins={[\n    FileSystemPlugin,\n  ]}\n/\u003e\n```\n\nor if the plugin requires config\n\n```jsx\nimport NodeEvalPlugin from 'terminal-in-react-node-eval-plugin';\nimport pseudoFileSystemPlugin from 'terminal-in-react-pseudo-file-system-plugin';\nconst FileSystemPlugin = pseudoFileSystemPlugin();\n\n...\n\u003cTerminal\n  plugins={[\n    FileSystemPlugin,\n    {\n      class: NodeEvalPlugin,\n      config: {\n        filesystem: FileSystemPlugin.displayName\n      }\n    }\n  ]}\n/\u003e\n...\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"http://g.recordit.co/4xcIZRKJCD.gif\" /\u003e\n\u003c/p\u003e\n\nAwesome! Right? Let us know if you make something interesting 😃\n\n## Plugin List\n\n - [terminal-in-react-pseudo-file-system-plugin](https://github.com/jcgertig/terminal-in-react-pseudo-file-system-plugin) : A client-side only filesystem\n - [terminal-in-react-node-eval-plugin](https://github.com/jcgertig/terminal-in-react-node-eval-plugin) : used with a filesystem to evaluate js code\n - [terminal-in-react-vi-plugin](https://github.com/jcgertig/terminal-in-react-vi-plugin) : used with a filesystem to edit the contents of files more easily\n\n\n## More features\n\n### Tab autocomplete\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/3e719f4091cbd72f3e1f99209493e50d.gif\" /\u003e\n\u003c/p\u003e\n\n### Multiline input 🤹🏼‍♀️\n\nvia `shift + enter`\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"http://g.recordit.co/AznpOohzJL.gif\" /\u003e\n\u003c/p\u003e\n\n### Check history of your commands 🖱️\n\nusing arrow down and up keys\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/6fa55a8fbb961787c51e406e612e0bb8.gif\" /\u003e\n\u003c/p\u003e\n\n### Keyboard shortcuts ⌨\nYou can define keyboard shortcuts. They have to be grouped by os. The three available are\n`win`, `darwin`, and `linux`. You can group multiple os by a `,` for example if the\nshortcut was for all platforms `win,darwin,linux` would be fine as a key\n\n```jsx\n\u003cTerminal\n  shortcuts={{\n    'darwin,win,linux': {\n      'ctrl + a': 'echo whoo',\n    },\n  }}\n/\u003e\n```\n\nBut you might want to specific\n\n```jsx\n\u003cTerminal\n  shortcuts={{\n    'win': {\n      'ctrl + a': 'echo hi windows',\n    },\n    'darwin': {\n      'cmd + a': 'echo hi mac'\n    },\n    'linux': {\n      'ctrl + a': 'echo hi linux'\n    }\n  }}\n/\u003e\n```\n\nYou can mix and match\n\n```jsx\n\u003cTerminal\n  shortcuts={{\n    'win,linux': {\n      'ctrl + b': 'echo we are special',\n    },\n    'win': {\n      'ctrl + a': 'echo hi windows',\n    },\n    'darwin': {\n      'cmd + a': 'echo hi mac'\n    },\n    'linux': {\n      'ctrl + a': 'echo hi linux'\n    }\n  }}\n/\u003e\n```\n\nThe value of the shortcut should be a command to run.\n\n\n## Override the top bar buttons actionHandlers\n\nUse the prop `actionHandlers`.\n\nThe object allows for 3 methods `handleClose`, `handleMaximise`, `handleMinimise`;\n\nEach one is a function and will pass in the default method as the first param.\nAny method not passed in will use the default.\n\n```jsx\n\u003cTerminal\n  actionHandlers={{\n    handleClose: (toggleClose) =\u003e {\n      // do something on close\n      toggleClose();\n    },\n    handleMaximise: (toggleMaximise) =\u003e {\n      // do something on maximise\n      toggleMaximise();\n    }\n  }}\n/\u003e\n```\n\n## Customization\n\nUse\n\n* prop `color` to change the color of the text.\n* prop `outputColor` to change the color of the output text defaults to color prop.\n* prop `backgroundColor` to change the background.\n* prop `barColor` to change the color of bar.\n* prop `prompt` to change the prompt (`\u003e`) color.\n* prop `showActions` to change if the three circles are shown.\n* prop `hideTopBar` to hide the top bar altogether.\n* prop `allowTabs` to allow multiple tabs.\n\n## API\n\n**component props**\n\n| Props        | Type           | Default  |\n| ------------- |:-------------:| -----:|\n| **color**      | string | 'green' |\n| **outputColor** | string | props.color |\n| **backgroundColor**      | string      |   'black' |\n| **prompt** | string      |    'green' |\n| **barColor** | string      |    'black' |\n| **description** | object      |    {} |\n| **commands** | object      |    { clear, help, show, } |\n| **msg** | string      |    - |\n| **closedTitle** | string      |    OOPS! You closed the window. |\n| **closedMessage** | string      |    Click on the icon to reopen. |\n| **watchConsoleLogging** | bool | false |\n| **commandPassThrough** | function | null |\n| **promptSymbol** | string | \u003e |\n| **plugins** | array | [ { name: '', load: new Plugin(), commands: {} descriptions: {} } ] |\n| **startState** | string ['open', 'maximised', 'minimised', 'closed'] | 'open' |\n| **showActions** | bool | true |\n| **hideTopBar** | bool | false |\n| **allowTabs** | bool | true |\n| **actionHandlers** | object | - |\n\n## Built-in commands\n\n* `clear` - Clears the screen\n* `help` - List all the commands\n* `show` - Shows a msg if any\n* `echo` - Display the input message\n* `edit-line` - Edits the last line or a given line using the `-l` argument\n\n## Where to use ?\n\n* Embed it as a toy on your website\n* For showcasing\n* Explain any of your projects using this terminal component\n* or just play with it\n\n## You want a X feature\n\nSure! Check our [todolist](./todo.md) or create an issue.\n\n## Contributing\n\n[Contributing Guide](./CONTRIBUTING.md)\n\n## Troubleshooting\n\n**Build errors when using with `create-react-app`**\u003cbr/\u003e\n\nEject from `create-react-app` and use a custom webpack configuration with [`babili-webpack-plugin`](https://github.com/webpack-contrib/babili-webpack-plugin). Read more about this [here](https://github.com/facebookincubator/create-react-app/issues/984).\n\n**Style issues when maximizing**\n\nSet the style to `height: 100vh` on parent element.\n\n[npm-dm]: https://img.shields.io/npm/dm/terminal-in-react.svg\n[npm-dt]: https://img.shields.io/npm/dt/terminal-in-react.svg\n[npm-v]: https://img.shields.io/npm/v/terminal-in-react.svg\n[deps]: https://img.shields.io/david/nitin42/terminal-in-react.svg\n[dev-deps]: https://img.shields.io/david/dev/nitin42/terminal-in-react.svg\n[license]: https://img.shields.io/npm/l/terminal-in-react.svg\n[package-url]: https://npmjs.com/package/terminal-in-react\n\n\u003ca href=\"https://app.codesponsor.io/link/FCRW65HPiwhNtebDx2tTc53E/nitin42/terminal-in-react\" rel=\"nofollow\"\u003e\u003cimg src=\"https://app.codesponsor.io/embed/FCRW65HPiwhNtebDx2tTc53E/nitin42/terminal-in-react.svg\" style=\"width: 888px; height: 68px;\" alt=\"Sponsor\" /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Fterminal-in-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2Fterminal-in-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Fterminal-in-react/lists"}