{"id":16668621,"url":"https://github.com/codhek/qsearch","last_synced_at":"2025-10-09T13:06:50.230Z","repository":{"id":44128344,"uuid":"192512810","full_name":"CodHeK/qsearch","owner":"CodHeK","description":":zap: Lightning fast Search Bar component for React using Trie! Get filtered results and suggested searches on the go!","archived":false,"fork":false,"pushed_at":"2022-12-03T14:14:31.000Z","size":422,"stargazers_count":10,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T21:23:36.595Z","etag":null,"topics":["search","searchbar","suggestion-engine","trie-tree"],"latest_commit_sha":null,"homepage":"https://nifty-elion-04a803.netlify.com/","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/CodHeK.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":"2019-06-18T09:53:03.000Z","updated_at":"2022-02-03T19:58:02.000Z","dependencies_parsed_at":"2023-01-23T22:47:10.332Z","dependency_job_id":null,"html_url":"https://github.com/CodHeK/qsearch","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/CodHeK%2Fqsearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodHeK%2Fqsearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodHeK%2Fqsearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodHeK%2Fqsearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodHeK","download_url":"https://codeload.github.com/CodHeK/qsearch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248097979,"owners_count":21047346,"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":["search","searchbar","suggestion-engine","trie-tree"],"created_at":"2024-10-12T11:26:09.551Z","updated_at":"2025-10-09T13:06:45.207Z","avatar_url":"https://github.com/CodHeK.png","language":"JavaScript","readme":"![logo](cover.png)\n\n![voila](https://img.shields.io/badge/npm-v1.0.4-blue.svg) ![build](https://img.shields.io/badge/build-passing-green.svg)\n\n### Installation\n\n```\nnpm install --save qsearch\n```\n\n### Demo\n\nTry out the demo [App](https://nifty-elion-04a803.netlify.com/).\n\nLink to the Demo [App repository](https://github.com/CodHeK/qsearch-demo-app).\n\n### How To Use\n\nFirst import this component where you want to use it\n\n```\nimport Search from 'qsearch';\n```\n\nThen just render it as :\n\n```\n\u003cSearch config={config} /\u003e\n```\n\n### Props\n\n```\n/* \n    CONFIG PASSED AS PROPS: \n    \n    data: The data that needs to be searched upon.\n    styles: Add custom styles to your search bar Component\n    onEnter: Enable search on ENTER or on the fly!\n    callback: mention a callback function to \n              receive your search data\n              \n*/\n```\n\n\n#### Example data :\n```\n[\n    {\n        \"id\": 1,\n        \"name\": \"Leanne Graham\",\n        \"username\": \"Bret\",\n        \"email\": \"Sincere@april.biz\",\n        \"address\": {\n          \"street\": \"Kulas Light\",\n          \"suite\": \"Apt. 556\",\n          \"city\": \"Gwenborough\",\n          \"zipcode\": \"92998-3874\",\n          \"geo\": {\n            \"lat\": \"-37.3159\",\n            \"lng\": \"81.1496\"\n          }\n        },\n        \"phone\": \"1-770-736-8031 x56442\",\n        \"website\": \"hildegard.org\",\n        \"company\": {\n          \"name\": \"Romaguera-Crona\",\n          \"catchPhrase\": \"Multi-layered client-server neural-net\",\n          \"bs\": \"harness real-time e-markets\"\n        }\n    },\n]\n\n```\n\n#### Example use :\n\n```\nimport React, { Component } from 'react';\nimport Search from 'qsearch';\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: null,\n    }\n  }\n  \n  componentWillMount() {\n    fetch('https://jsonplaceholder.typicode.com/users')\n        .then(resp =\u003e resp.json())\n        .then(data =\u003e this.setState({ data, }));\n  }\n  \n  /* Specify a callback to receive the \n     filtered entries and suggested words back from the Component */\n     \n  getSearchData = (data) =\u003e {\n        const { filtered, suggested } = data;\n        this.setState({ filtered, suggested });\n  };\n  \n  render() {\n    const { data } = this.state;\n    \n    const SearchBarStyles = {\n      width: '300px',\n      height: '50px',\n      margin: '2%',\n      borderRadius: '10px',\n      paddingLeft: '5px'\n    };\n    \n    const config = {\n      data: data,\n      styles: SearchBarStyles,\n      onEnter: true,\n      callback: this.getSearchData\n    };\n    \n    return (\n          data \u0026\u0026 \u003cSearch config={config} /\u003e\n    );\n  }\n}\n\nexport default App;\n```\n### Also ...\n\nIf you find any bugs/edge-cases not taken care of :see_no_evil:, feel free to open an [issue](https://github.com/CodHeK/qsearch/issues). :smiley:","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodhek%2Fqsearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodhek%2Fqsearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodhek%2Fqsearch/lists"}