{"id":23106188,"url":"https://github.com/necessarylion/search-js","last_synced_at":"2025-10-11T00:39:16.159Z","repository":{"id":147366000,"uuid":"618690180","full_name":"necessarylion/search-js","owner":"necessarylion","description":"Instance search UI","archived":false,"fork":false,"pushed_at":"2025-07-21T08:49:52.000Z","size":1486,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-20T10:01:56.444Z","etag":null,"topics":["algolia","instance","instance-search","react-search","search","search-js","vue-search"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@bilions/search-js","language":"TypeScript","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/necessarylion.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-25T04:00:51.000Z","updated_at":"2025-07-21T08:49:55.000Z","dependencies_parsed_at":"2024-08-13T04:54:06.102Z","dependency_job_id":null,"html_url":"https://github.com/necessarylion/search-js","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/necessarylion/search-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/necessarylion%2Fsearch-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/necessarylion%2Fsearch-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/necessarylion%2Fsearch-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/necessarylion%2Fsearch-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/necessarylion","download_url":"https://codeload.github.com/necessarylion/search-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/necessarylion%2Fsearch-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005648,"owners_count":26083942,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["algolia","instance","instance-search","react-search","search","search-js","vue-search"],"created_at":"2024-12-17T00:59:41.913Z","updated_at":"2025-10-11T00:39:16.125Z","avatar_url":"https://github.com/necessarylion.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Search JS\n\n![build status](https://github.com/necessarylion/search-js/actions/workflows/build.yml/badge.svg) [![npm version](https://badge.fury.io/js/@bilions%2Fsearch-js.svg)](https://badge.fury.io/js/@bilions%2Fsearch-js) [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)\n\nInstance search UI component for any Javascript framework.\n\nCompatible with\n\n- React\n- Vue\n- Angular\n\n### Contents\n\n- [Installation](#installation)\n  - [Via cdn](#install-via-cdn)\n  - [Via npm](#install-via-npm)\n- [Usage](#usage)\n  - [Javascript](#javascript)\n  - [Typescript](#typescript)\n  - [Usage with API](#usage-with-api-call)\n- [Options](#available-options)\n- [Functions](#available-functions)\n- [Theme](#theme)\n  - [Custom Theme](#custom-theme-color)\n\n### Installation\n\n#### Install via cdn\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@bilions/search-js/dist/search-js.js\"\u003e\u003c/script\u003e\n```\n\n#### Install via npm\n\n`npm install @bilions/search-js`\n\n#### Usage\n\n###### Javascript\n\n```js\nimport SearchJS from '@bilions/search-js'\n\nconst data = [\n  {\n    title: 'Validation',\n    description: 'Create validation easily using validator',\n    route: '/validation',\n  },\n  {\n    title: 'Request',\n    description: 'Http request',\n    route: '/request',\n  },\n]\n\nconst searchJs = SearchJS({\n  data,\n  theme: '#FF2E1F',\n  width: '600px',\n  positionTop: '85px',\n  search: {\n    placeholder: 'Search docs',\n  },\n  onSelected: (i) =\u003e {\n    console.log(i)\n  },\n  onSearch: (keyword) =\u003e {\n    console.log(keyword)\n  },\n})\n\nsearchJs.open()\n```\n\n###### Typescript\n\n```js\nimport SearchJS, { SearchJSConfig, SearchJSItem } from '@bilions/search-js'\n\nconst config: SearchJSConfig = {\n  data: [\n    {\n      title: 'Validation',\n      description: 'Create validation easily using validator',\n      route: '/validation',\n    },\n    {\n      title: 'Request',\n      description: 'Http request',\n      route: '/request',\n    },\n  ],\n  theme: '#FF2E1F',\n  width: '600px',\n  positionTop: '85px',\n  search: {\n    placeholder: 'Search docs',\n  },\n  onSelected: (value: SearchJSItem) =\u003e {\n    console.log(value)\n  },\n  onSearch: (keyword) =\u003e {\n    console.log(keyword)\n  },\n}\n\nconst searchJs = SearchJS(config)\nsearchJs.open()\n```\n\n#### Usage with API call\n\n```js\nasync function getFromApi(keyword = '') {\n  let res = await fetch('https://dummyjson.com/products/search?q=' + keyword)\n  let json = await res.json()\n  return json.products.map((p) =\u003e {\n    p.icon = `\u003cimg class=\"product-image\" src=\"${p.thumbnail}\" /\u003e`\n    return p\n  })\n}\n\nconst searchJs = SearchJS({\n  theme: '#FF2E1F',\n  width: '600px',\n  darkMode: false,\n  positionTop: '50px',\n  data: [],\n  search: {\n    placeholder: 'Search products',\n  },\n  onSelected: (route) =\u003e {\n    console.log(route)\n  },\n  onSearch: (keyword) =\u003e {\n    return getFromApi(keyword)\n  },\n})\n```\n\n#### Available Options\n\n| **Name**             | **Required** | **Description**                                                     |\n| -------------------- | :----------: | ------------------------------------------------------------------- |\n| `data`               |     YES      | data to search                                                      |\n| `data.title`         |     YES      | data title                                                          |\n| `data.description`   |      NO      | data description                                                    |\n| `data.icon`          |      NO      | data icon (can use html string, svg string etc...)                                                    |\n| `element`            |      NO      | element to append search-js                                         |\n| `theme`              |      NO      | color code or theme name (`#FF2E1F`, `github-light`, `github-dark`) |\n| `darkMode`           |      NO      | default `false`. set `true` for dark mode                           |\n| `width`              |      NO      | modal width default (400px)                                         |\n| `search`             |              |                                                                     |\n| `search.icon`        |      NO      | svg icon string for search input                                    |\n| `search.placeholder` |      NO      | placeholder text for search input (default `Search`)                |\n| `positionTop`        |      NO      | default `85px`                                                      |\n| `onSelected`         |     YES      | callback function that will trigger after item selected             |\n| `onSearch`           |      NO      | this function will trigger when user type something                 |\n\n#### Available functions\n\n- `open()` function will trigger to open search menu\n- `close()` function will trigger to close search menu\n- Alternatively press `cmd + k` or `ctrl + k` to open search menu and `ESC` to close menu\n\n#### Theme\n\n#### Available ready made theme\n\n- `github-dark`\n- `github-light`\n\n##### Github Dark (github-dark)\n\n\u003cimg width=\"350\" src=\"https://raw.githubusercontent.com/necessarylion/search-js/main/demo/github-dark.png\" /\u003e\n\n##### Github Light (github-light)\n\n\u003cimg width=\"350\" src=\"https://raw.githubusercontent.com/necessarylion/search-js/main/demo/github-light.png\" /\u003e\n\n##### Light Theme with color code\n\n\u003cimg width=\"350\" src=\"https://raw.githubusercontent.com/necessarylion/search-js/main/demo/dark-theme.png\" /\u003e\n\n##### Dark Theme with color code\n\n\u003cimg width=\"350\" src=\"https://raw.githubusercontent.com/necessarylion/search-js/main/demo/light-theme.png\" /\u003e\n\n#### Custom theme color\n\nOverride below css variables for custom theme color.\n\n###### Default Light mode\n\n```css\nroot {\n  --search-js-backdrop-bg: rgba(101, 108, 133, 0.8);\n  --search-js-modal-bg: #f5f6f7;\n  --search-js-modal-box-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64;\n  --search-js-modal-footer-box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);\n  --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,\n    0 1px 2px 1px rgba(30, 35, 90, 0.4);\n  --search-js-keyboard-button-bg: linear-gradient(-225deg, #d5dbe4, #f8f8f8);\n  --search-js-search-input-bg: white;\n  --search-js-item-bg: white;\n  --search-js-text-color: #969faf;\n  --search-js-input-placeholder-color: #969faf;\n  --search-js-item-box-shadow: 0 1px 3px 0 #d4d9e1;\n}\n```\n\n###### Default Dark mode\n\n```css\nroot {\n  --search-js-backdrop-bg: rgba(47, 55, 69, 0.7);\n  --search-js-modal-bg: #1b1b1d;\n  --search-js-modal-box-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;\n  --search-js-modal-footer-box-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);\n  --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,\n    0 2px 2px 0 rgba(3, 4, 9, 0.3);\n  --search-js-keyboard-button-bg: linear-gradient(-26.5deg, transparent 0%, transparent 100%);\n  --search-js-search-input-bg: black;\n  --search-js-item-bg: #1c1e21;\n  --search-js-text-color: #b3b3b3;\n  --search-js-input-placeholder-color: #aeaeae;\n  --search-js-item-box-shadow: none;\n}\n```\n### Development\nWant to contribute? Great! Fork the repo and create PR to us.\n\nInspired by algolia\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnecessarylion%2Fsearch-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnecessarylion%2Fsearch-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnecessarylion%2Fsearch-js/lists"}