{"id":16618346,"url":"https://github.com/aicioara/ink-quicksearch","last_synced_at":"2025-07-02T15:36:29.107Z","repository":{"id":56673650,"uuid":"133497523","full_name":"aicioara/ink-quicksearch","owner":"aicioara","description":":black_nib: Quicksearch Input component for Ink","archived":false,"fork":false,"pushed_at":"2020-08-18T23:03:15.000Z","size":50,"stargazers_count":10,"open_issues_count":2,"forks_count":14,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T15:55:39.272Z","etag":null,"topics":["cli","ink","node-package","react"],"latest_commit_sha":null,"homepage":"","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/aicioara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-15T10:06:55.000Z","updated_at":"2023-10-04T10:38:00.000Z","dependencies_parsed_at":"2022-08-15T23:00:58.856Z","dependency_job_id":null,"html_url":"https://github.com/aicioara/ink-quicksearch","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/aicioara/ink-quicksearch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aicioara%2Fink-quicksearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aicioara%2Fink-quicksearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aicioara%2Fink-quicksearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aicioara%2Fink-quicksearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aicioara","download_url":"https://codeload.github.com/aicioara/ink-quicksearch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aicioara%2Fink-quicksearch/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263166813,"owners_count":23424250,"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":["cli","ink","node-package","react"],"created_at":"2024-10-12T02:19:38.166Z","updated_at":"2025-07-02T15:36:28.729Z","avatar_url":"https://github.com/aicioara.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ink Quicksearch\n\n\u003e QuickSearch Component for [Ink](https://github.com/vadimdemedes/ink)\n\n![CircleCI](https://circleci.com/gh/aicioara/ink-quicksearch.png?style=shield\u0026circle-token=:circle-token)\n\n## Install\n\n```\n$ npm install ink-quicksearch\n```\n\n## Quickstart\n\n```bash\nnpm install\nnpm start\n```\n\n## Usage\n\n```jsx\nconst {h, render, Component} = require('ink');\nconst QuickSearch = require('ink-quicksearch');\n\nclass Demo extends Component {\n    render() {\n        const props = {\n            items: [\n                {value: 1, label: 'Animal'},\n                {value: 3, label: 'Antilope'},\n                {value: 2, label: 'Animation'},\n                {value: 0, label: 'Animate'},\n                {value: 4, label: 'Arizona'},\n                {value: 5, label: 'Aria'},\n                {value: 6, label: 'Arid'},\n            ],\n            onSelect: item =\u003e {\n                // `item` = { label: 'First', value: 'first' }\n            },\n        };\n\n        return \u003cQuickSearch {...props} /\u003e\n    }\n}\n\nrender(\u003cDemo/\u003e);\n```\n\n\n## Props\n\n| Parameter | Type | Default | Description\n| --- | --- | --- | --- |\n| items | `Array(object)` | `[]` | Items to display in a list. \u003cbr\u003e Each item must be an object and have at least a `label` prop. \n| onSelect | `function` | | Function to call when user selects an item. \u003cbr\u003e Item object is passed to that function as an argument.\n| focus | `boolean` | `true` | Listen to user's input. \u003cbr\u003e Useful in case there are multiple input components at the same time and input must be \"routed\" to a specific component.\n| caseSensitive | `boolean` | `false` | Whether or not quicksearch matching will be case sensitive.\n| limit | `int` | `0` | Limit the number of rows to display. `0` is unlimited \u003cbr\u003e Use in conjunction with https://www.npmjs.com/package/term-size.\n| forceMatchingQuery | `bool` | `false` | If set to true, queries that return no results are not allowed. In particular, if previous query `X` returns at least one result and `X + new_character` would not, query will not update to `X + new_character`.\n| clearQueryChars | `Array(char)` | `['\\u0015', '\\u0017']` \u003cbr\u003e (\u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eu\u003c/kbd\u003e, \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003ew\u003c/kbd\u003e) | Key Combinations that will clear the query. \u003cbr\u003e `ch` follows the `keypress` API `process.stdin.on('keypress', (ch, key) =\u003e {})`.\n| initialSelectionIndex | `int` | `0` | Selection index when the component is initially rendered or when `props.items` changes. Can be set together with new `props.items` to automatically select an option.\n| indicatorComponent | Component | | Custom component to override the default indicator component (default - arrow).\n| itemComponent | Component | | Custom component to override the default item style (default - selection coloring).\n| highlightComponent | Component | | Custom component to override the default highlight style (default - background highlight).\n| statusComponent | Component | | Custom component to override the status component (default - current query).\n\n## Component Props\n\n### indicatorComponent\n\nType: `Component`\u003cbr\u003e\nProps:\n\n- `isSelected`: `boolean`\n- `isHighlighted`: `boolean`\n- `item`: `Object` - The corresponding object inside `props.items`\n\n\n### itemComponent\n\nType: `Component`\u003cbr\u003e\nProps:\n\n- `isSelected`: `boolean`\n- `isHighlighted`: `boolean`\n- `item`: `Object` - The corresponding object inside `props.items`\n- `children`: `any`\n\n\n### highlightComponent\n\nType: `Component`\u003cbr\u003e\nProps:\n\n- `isSelected`: `boolean`\n- `isHighlighted`: `boolean`\n- `item`: `Object` - The corresponding object inside `props.items`\n- `children`: `any`\n\n\n### statusComponent\n\nType: `Component`\u003cbr\u003e\nProps:\n\n- `hasMatch`: `boolean`\n- `children`: `any`\n\n\n\n## Default Components\n\n```jsx\n// For the following four, whitespace is important\nconst IndicatorComponent = ({isSelected}) =\u003e {\n    return \u003cColor hex=\"#00FF00\"\u003e{isSelected ? '\u003e' : ' '} \u003c/Color\u003e;\n};\n\nconst ItemComponent = ({isSelected, children}) =\u003e (\n    \u003cColor hex={isSelected ? '#00FF00' : ''}\u003e{children}\u003c/Color\u003e\n);\n\nconst HighlightComponent = ({children}) =\u003e (\n    \u003cColor bgHex=\"#6C71C4\"\u003e{children}\u003c/Color\u003e\n);\n\nconst StatusComponent = ({hasMatch, children}) =\u003e (\n    \u003cColor hex={hasMatch ? '#00FF00' : '#FF0000'}\u003e{children}\u003c/Color\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faicioara%2Fink-quicksearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faicioara%2Fink-quicksearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faicioara%2Fink-quicksearch/lists"}