{"id":13438468,"url":"https://github.com/zackargyle/react-bash","last_synced_at":"2025-04-04T06:06:20.704Z","repository":{"id":57097766,"uuid":"60380652","full_name":"zackargyle/react-bash","owner":"zackargyle","description":"A configurable/extendable bash terminal React component","archived":false,"fork":false,"pushed_at":"2020-08-03T03:15:17.000Z","size":441,"stargazers_count":508,"open_issues_count":8,"forks_count":65,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-28T05:09:45.603Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zackargyle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-03T22:10:29.000Z","updated_at":"2024-11-21T16:35:34.000Z","dependencies_parsed_at":"2022-08-20T16:50:50.760Z","dependency_job_id":null,"html_url":"https://github.com/zackargyle/react-bash","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackargyle%2Freact-bash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackargyle%2Freact-bash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackargyle%2Freact-bash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackargyle%2Freact-bash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zackargyle","download_url":"https://codeload.github.com/zackargyle/react-bash/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128746,"owners_count":20888235,"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":[],"created_at":"2024-07-31T03:01:05.762Z","updated_at":"2025-04-04T06:06:20.658Z","avatar_url":"https://github.com/zackargyle.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Miscellaneous"],"sub_categories":["Uncategorized","Miscellaneous"],"readme":"# \\\u003cTerminal /\\\u003e\n\n[NO LONGER MAINTAINED] ReactBash is a configurable / extendable bash terminal component. It provides an easy way of adding a terminal to your application. The terminal has a few built in base commands, and allows a simple means of extending the understandable commands. It boasts things like autocomplete on tab, previous command navigation, and a test suite you can trust. It is easy to install and get started.\n\n```\nnpm install --save react-bash\n```\n\nTry out the [DEMO](http://zackargyle.github.io/react-bash/)\n\n![](https://raw.githubusercontent.com/zackargyle/react-bash/master/demo/screenshot.png)\n\n### Props\nprop         | description\n------------ | -----------\n`extensions` | An object of bash command extensions\n`history`    | An array of initial history items\n`structure`  | An object representing the file system\n`theme`      | A string representing which `theme` to use (Terminal.Themes.LIGHT, Terminal.Themes.DARK)\n`styles`     | An object overriding the theme styles passed to each section\n`prefix`     | The string used to prefix commands in history: defaults to `hacker@default`\n\n### Currently supported commands and args\ncommand      | args/flags | description\n------------ | ---------- | -----------\n`help`       |            | lists all available commands\n`clear`      |            | clears history\n`ls`         | path       | lists all file and dirs at path or `cwd`\n`cat`        | path/file  | prints out the contents of a file\n`mkdir`      | path/dir   | makes a new dir at path\n`cd`         | path       | change directory to relative path\n`pwd`        |            | prints out the `cwd`\n`echo`       | any        | prints out all args with env variables\n`printenv`   |            | prints out env variables\n`whoami`     |            | prints out current user's username\n\n### Extending the command list\nThe `extension` prop is an easy way to extend the bash commands that can be parsed from the terminal input. In essence, each command is a state reducer returning a new terminal state. This provides a lot of flexibility. Each command has access to the `structure`, `history`, and `cwd`, and expects the object returned to be applied in `setState` of the React component. Note that each extension should keep the state immutable, otherwise the component will not update. If we were to extend the commands with and existing command like 'clear, here's how we could do it.\n\n```js\nimport Terminal from 'react-bash';\n\nexport const clear = {\n    exec: ({ structure, history, cwd }, command) =\u003e {\n        return { structure, cwd, history: [] };\n    },\n};\n\nconst extensions = { clear };\n\u003cTerminal extensions={extensions} /\u003e\n```\n\nEach command is given the `state` and a parsed `command` object. The command object provides the `name`, `input`, `args`, and `flags` corresponding to the input. Some commands can use optional or required arguments. There are three types of args: `anonymous` args, `named` args (--), and `flag` args (-). To see how ReactBash parses the input.\n\nFor the input `foo some/path -baz --hello world`, ReactBash would parse the input as:\n```js\n{\n  command = 'foo'\n  input: 'foo some/path -baz --hello world',\n  args: {\n    0: 'some/path',\n    hello: 'world',\n  },\n  flags: { b: true, a: true, z: true },\n}\n```\n\n### History\nThe history prop and state arrays are lists of items that will be displayed as history items in the terminal. Essentially, anything that gets 'printed' out onto the terminal is a `history` item. The `prefix` prop is available to alter the bash user info that prepends commands in the history. If you'd like to add a welcome message to the initial state of the terminal, it's as easy as passing in a prop.\n\n```js\nconst history = [{ value: 'Welcome to the terminal!' }];\n\u003cTerminal history={history}  /\u003e\n```\n\n### Structure\nThe structure object is a representation of the \"file system\" found within the terminal. It is what is used to navigate into/out of directories, display file contents, and suggesting autocompletions. Each key in the dict is either a `directory` or a `file`. If the object has a `content` field then it is assumed to be a `file`. This simplified the interface and makes it easier to get started. Here's an example of what a `structure` might look like.\n\n```js\nconst structure = {\n    src: {\n        file1: { content: 'This is the text content for \u003cfile1\u003e of \u003csrc\u003e' },\n        file2: { content: 'This is the text content for \u003cfile2\u003e of \u003csrc\u003e' },\n        childDir1: {\n            file: { content: 'This is the text content for \u003cfile\u003e of \u003csrc/childDir1\u003e' },\n        },\n        childDir2: {\n        }\n    },\n    '.hiddenDir': {\n    },\n    '.hiddenFile': { content: 'This is a hidden file' },\n    file: { content: 'This is the text content for \u003cfile\u003e of the root directory' },\n};\n\n```\n\n### Scripts\nscript         | description\n-------------- | -----------\n`npm start`    | run the demo on `localhost:3000`\n`npm run test` | run the test suite\n`npm run lint` | run the linter\n\n### Patrons\n* [Derek Stavis](https://github.com/derekstavis)\n\n\u003eBe the second to contribute!\n\u003e✌⊂(✰‿✰)つ✌\n\n**Some ideas for contributions:**\n* Add `grep` command that walks/searches the `structure`\n* Add multiline support / text formatting for `cat`\n\n## License\n[MIT](http://isekivacenz.mit-license.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackargyle%2Freact-bash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzackargyle%2Freact-bash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackargyle%2Freact-bash/lists"}