{"id":18179331,"url":"https://github.com/gimnathperera/react-mui-multi-search","last_synced_at":"2025-11-10T07:32:32.755Z","repository":{"id":195218346,"uuid":"692447175","full_name":"gimnathperera/react-mui-multi-search","owner":"gimnathperera","description":"🎯 Unlock the power of Material-UI version 5 with our sleek React component and npm package! Experience effortless, multi-faceted search and filtering capabilities like never before. ","archived":false,"fork":false,"pushed_at":"2024-11-02T13:58:45.000Z","size":1261,"stargazers_count":33,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-08T23:59:30.185Z","etag":null,"topics":["featured","githubpackages","latest","muiv5","npm","npm-package","open-source","reactjs","search"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@gimnathperera/react-mui-multi-search","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/gimnathperera.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-09-16T14:03:12.000Z","updated_at":"2025-03-05T06:46:12.000Z","dependencies_parsed_at":"2023-09-17T03:16:30.549Z","dependency_job_id":"61c2776d-2010-44ec-a90f-e65e473027c6","html_url":"https://github.com/gimnathperera/react-mui-multi-search","commit_stats":null,"previous_names":["gimnath-perera/react-mui-multi-search","gimnathperera/react-mui-multi-search"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/gimnathperera/react-mui-multi-search","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gimnathperera%2Freact-mui-multi-search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gimnathperera%2Freact-mui-multi-search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gimnathperera%2Freact-mui-multi-search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gimnathperera%2Freact-mui-multi-search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gimnathperera","download_url":"https://codeload.github.com/gimnathperera/react-mui-multi-search/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gimnathperera%2Freact-mui-multi-search/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275844218,"owners_count":25538990,"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-09-18T02:00:09.552Z","response_time":77,"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":["featured","githubpackages","latest","muiv5","npm","npm-package","open-source","reactjs","search"],"created_at":"2024-11-02T18:09:15.874Z","updated_at":"2025-09-18T22:31:41.141Z","avatar_url":"https://github.com/gimnathperera.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv\u003e\n  \u003ch1\u003e@gimnathperera/react-mui-multi-search\u003c/h1\u003e\n\n🎯 Unlock the power of Material-UI version 5 with our sleek React component and npm package! Experience effortless, multi-faceted search and filtering capabilities like never before.\n\n![MultiSelect GIF](public/usage.gif)\n\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/your-username/your-project-name/blob/main/LICENSE) [![npm](https://img.shields.io/npm/dw/@gimnathperera/react-mui-multi-search)](https://www.npmjs.com/package/@gimnathperera/react-mui-multi-search)\n\n\u003c/div\u003e\n\n## Table of contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Accessibility](#Accessibility)\n- [Local Development](#local-development)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Features\n\nCurrently, `@gimnathperera/react-mui-multi-search` supports the following:\n\n- [x] Single or multi-search input fields.\n- [x] Various filter criteria (e.g., text, date, numeric).\n- [x] Add, remove, and clear filters.\n- [x] Support for custom filter components.\n- [x] Support for Material-UI theming.\n- [x] Mobile responsive\n- [ ] Dark mode support\n- [ ] Support for custom icons\n\nYou can suggest new features [here](https://github.com/gimnathperera/react-mui-multi-search/issues)\n\n## Installation\n\n### Package Managers\n\n```bash\n# npm\nnpm i @gimnathperera/react-mui-multi-search\nor\n# yarn\nyarn add @gimnathperera/react-mui-multi-search\nor\n# pnpm\npnpm add @gimnathperera/react-mui-multi-search\n```\n\n## Usage\n\n```ts\nimport {MultiSearch} from '@gimnathperera/react-mui-multi-search';\n\n\n\u003cMultiSearch\n  placeholder='Search public users'\n  searchOptions={[\n    { key: 'Name', value: 'name' },\n    { key: 'Email', value: 'email' },\n  ]}\n  filterOptions={[\n    {\n      filterKey: { key: 'Status', value: 'status' },\n      filterOptions: [\n        { key: 'Active', value: 'active' },\n        { key: 'Inactive', value: 'inactive' },\n        { key: 'Pending', value: 'pending' },\n      ],\n      filterType: 'SELECT',\n    },\n    {\n      filterKey: { key: 'Role', value: 'role' },\n      filterOptions: [\n        { key: 'Admin', value: 'admin' },\n        { key: 'Owner', value: 'owner' },\n        { key: 'Visitor', value: 'visitor' },\n      ],\n      filterType: 'SELECT',\n    },\n\n  ]}\n  onSearch={(searchText, filters) =\u003e {\n    console.log(searchText, filters);\n  }}\n/\u003e\n```\n\n### Data\n\nStructure of the data that's taken by the component,\n\n**TS Definition**\n\n```js\ninterface SelectOption {\n  key: string;\n  value: string;\n}\n\ninterface FilterOption {\n  key: string;\n  value: string;\n}\n\ninterface Filter {\n  filterKey: SelectOption;\n  filterOptions: SelectOption[];\n  filterType?: 'SELECT' | 'INPUT' | 'DATE' | 'DATE_RANGE';\n}\n```\n\n## API\n\n### MultiSearch\n\n| Parameter | Description                | Type                     | Default  |\n| --------- | -------------------------- | ------------------------ | -------- |\n| size      | size of the modal          | `small` `medium` `large` | `medium` |\n| styles    | the style of the component | Object                   | {}       |\n| hide      | hide the button            | boolean                  | `false`  |\n\n## Local Development\n\nThe `main` branch contains the latest version of the @gimnathperera/react-mui-multi-search component.\n\nTo begin local development:\n\n1. `yarn install`\n2. `yarn run dev`\n\nStorybook will appear on on \u003chttp://localhost:6006\u003e\n\nYou can run `yarn test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `\u003ccomponent\u003e/__tests__`).\nTo check the test coverage you can run `yarn coverage`.\n\n## Contributing\n\nContributions are welcome! If you have any ideas, bug reports, or feature requests, please submit them through the GitHub issue tracker. If you would like to contribute code, follow these steps:\n\n1. Fork the repository.\n2. Create a new branch for your feature or bug fix.\n3. Make the necessary changes and commit them.\n4. Push your changes to your forked repository.\n5. Submit a pull request to the main repository.\n\n## License\n\nThis project is licensed under the ![License](https://img.shields.io/badge/license-MIT-blue.svg)\n\n#\n\nIf you need to reach out to me [contact me](mailto:gimnathperera@gmail.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgimnathperera%2Freact-mui-multi-search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgimnathperera%2Freact-mui-multi-search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgimnathperera%2Freact-mui-multi-search/lists"}