{"id":20797188,"url":"https://github.com/daniguardiola/fullscreen-ink","last_synced_at":"2025-04-09T19:43:12.259Z","repository":{"id":221169682,"uuid":"719737138","full_name":"DaniGuardiola/fullscreen-ink","owner":"DaniGuardiola","description":"Create fullscreen command line apps with Ink.","archived":false,"fork":false,"pushed_at":"2024-02-06T14:29:35.000Z","size":60,"stargazers_count":29,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-23T21:45:47.644Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/DaniGuardiola.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2023-11-16T19:49:49.000Z","updated_at":"2025-03-21T03:49:20.000Z","dependencies_parsed_at":"2024-02-06T15:52:31.650Z","dependency_job_id":null,"html_url":"https://github.com/DaniGuardiola/fullscreen-ink","commit_stats":null,"previous_names":["daniguardiola/fullscreen-ink"],"tags_count":1,"template":false,"template_full_name":"DaniGuardiola/package-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniGuardiola%2Ffullscreen-ink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniGuardiola%2Ffullscreen-ink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniGuardiola%2Ffullscreen-ink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniGuardiola%2Ffullscreen-ink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DaniGuardiola","download_url":"https://codeload.github.com/DaniGuardiola/fullscreen-ink/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248101401,"owners_count":21047965,"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-11-17T16:32:53.944Z","updated_at":"2025-04-09T19:43:12.223Z","avatar_url":"https://github.com/DaniGuardiola.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fullscreen-ink\n\nCreate responsive, full-screen Ink terminal apps.\n\n## Usage\n\n```bash\nnpm i fullscreen-ink\n```\n\n```js\nimport { withFullScreen } from \"fullscreen-ink\";\n\nwithFullScreen(\u003cApp /\u003e).start();\n```\n\nThe app will be full-screen and will resize responsively as the terminal window changes size. After the app is closed, the previous content of the terminal will be restored.\n\n### Ink `render` options\n\nYou can pass any options that Ink's `render` function accepts to `withFullScreen`:\n\n```js\nwithFullScreen(\u003cApp /\u003e, { exitOnCtrlC: false }).start();\n```\n\n### The Ink instance\n\nIf you need the Ink \"instance\" (normally returned from Ink's `render` function), you can access it through the `instance` property of the object returned from `withFullScreen`:\n\n```js\nconst ink = withFullScreen(\u003cApp /\u003e);\n// ...\nink.instance.rerender(\u003cSomethingElse /\u003e);\n```\n\nIf you access it, keep in mind that due to how `fullscreen-ink` works, there might be a race condition unless you wait for the `start` method to resolve. For example:\n\n```js\nconst ink = withFullScreen(\u003cApp /\u003e);\nawait ink.start();\nink.instance.rerender(\u003cSomethingElse /\u003e);\n```\n\n### Waiting for the app to exit\n\nInstead of calling `waitUntilExit` on the Ink instance, you must use the `waitUntilExit` property of the object:\n\n```js\nconst ink = withFullScreen(\u003cApp /\u003e);\n// ...\nawait ink.waitUntilExit();\n// do something after the app has closed\n```\n\n### Exiting the app\n\nIf you use a method like `process.exit` to close the app, the terminal will likely be left in a weird state. Instead, you should use the `exit` method of Ink's `useApp`:\n\n```js\nimport { useApp } from \"ink\";\n\n// somewhere in a component\nconst app = useApp();\napp.exit();\n```\n\n## How it works\n\nFull screen is achieved through the combination of two things:\n\n### Alternate screen buffer\n\nWhen the app starts, the terminal is switched to the alternate screen buffer. This means that the app will be the only thing visible in the terminal. When the app is closed, the previous content of the terminal will be restored.\n\nThis is similar to what happens when you run popular terminal apps like `vim` or `less` in the terminal.\n\n### FullScreenBox component\n\nThe `FullScreenBox` component is a simple Ink component that fills the entire terminal window. This is achieved by accessing the terminal's size through Ink's `useStdout` hook and rendering a box with the same dimensions. The size is updated on `resize` events, so the box will always fill the terminal window throughout its lifetime.\n\nThis component is automatically added to the root of the app when you use `withFullScreen`. If you need a custom layout (e.g. you want to add a border around the whole app), you can simply create an Ink `\u003cBox /\u003e` with flex-grow at the root of your app and it will fill the entire terminal window.\n\nYou can also use the component directly without `withFullScreen`, but you will have to handle the alternate screen buffer (if you want it) yourself. The component has the same API as Ink's `Box` component, except that it defaults to the `width` and `height` values that match the terminal window.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniguardiola%2Ffullscreen-ink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaniguardiola%2Ffullscreen-ink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniguardiola%2Ffullscreen-ink/lists"}