Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gimnathperera/react-mui-multi-search
🎯 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.
https://github.com/gimnathperera/react-mui-multi-search
featured githubpackages latest muiv5 npm npm-package open-source reactjs search
Last synced: 4 days ago
JSON representation
🎯 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.
- Host: GitHub
- URL: https://github.com/gimnathperera/react-mui-multi-search
- Owner: gimnathperera
- Created: 2023-09-16T14:03:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-24T04:21:38.000Z (about 1 year ago)
- Last Synced: 2024-04-26T08:22:21.416Z (6 months ago)
- Topics: featured, githubpackages, latest, muiv5, npm, npm-package, open-source, reactjs, search
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@gimnathperera/react-mui-multi-search
- Size: 1.2 MB
- Stars: 23
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
@gimnathperera/react-mui-multi-search
🎯 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.
[](https://github.com/your-username/your-project-name/blob/main/LICENSE) [](https://www.npmjs.com/package/@gimnathperera/react-mui-multi-search)
## Table of contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [Accessibility](#Accessibility)
- [Local Development](#local-development)
- [Contributing](#contributing)
- [License](#license)
## Features
Currently, `@gimnathperera/react-mui-multi-search` supports the following:
- [x] Single or multi-search input fields.
- [x] Various filter criteria (e.g., text, date, numeric).
- [x] Add, remove, and clear filters.
- [x] Support for custom filter components.
- [x] Support for Material-UI theming.
- [x] Mobile responsive
- [ ] Dark mode support
- [ ] Support for custom icons
You can suggest new features [here](https://github.com/gimnathperera/react-mui-multi-search/issues)
## Installation
### Package Managers
```bash
# npm
npm i @gimnathperera/react-mui-multi-search
or
# yarn
yarn add @gimnathperera/react-mui-multi-search
or
# pnpm
pnpm add @gimnathperera/react-mui-multi-search
```
## Usage
```ts
import {MultiSearch} from '@gimnathperera/react-mui-multi-search';
{
console.log(searchText, filters);
}}
/>
```
### Data
Structure of the data that's taken by the component,
**TS Definition**
```js
interface SelectOption {
key: string;
value: string;
}
interface FilterOption {
key: string;
value: string;
}
interface Filter {
filterKey: SelectOption;
filterOptions: SelectOption[];
filterType?: 'SELECT' | 'INPUT' | 'DATE' | 'DATE_RANGE';
}
```
## API
### MultiSearch
| Parameter | Description | Type | Default |
| --------- | -------------------------- | ------------------------ | -------- |
| size | size of the modal | `small` `medium` `large` | `medium` |
| styles | the style of the component | Object | {} |
| hide | hide the button | boolean | `false` |
## Local Development
The `main` branch contains the latest version of the @gimnathperera/react-mui-multi-search component.
To begin local development:
1. `yarn install`
2. `yarn run dev`
Storybook will appear on on
You 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 `/__tests__`).
To check the test coverage you can run `yarn coverage`.
## Contributing
Contributions 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:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make the necessary changes and commit them.
4. Push your changes to your forked repository.
5. Submit a pull request to the main repository.
## License
This project is licensed under the 
#
If you need to reach out to me [contact me](mailto:[email protected]).