https://github.com/useswype/refilter
A library to help you add filtering to your ReactJs applications
https://github.com/useswype/refilter
filtering headlessui nextjs react
Last synced: 7 months ago
JSON representation
A library to help you add filtering to your ReactJs applications
- Host: GitHub
- URL: https://github.com/useswype/refilter
- Owner: useswype
- License: mit
- Created: 2024-08-07T00:43:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-07T18:25:23.000Z (about 1 year ago)
- Last Synced: 2025-05-05T06:41:34.046Z (8 months ago)
- Topics: filtering, headlessui, nextjs, react
- Language: TypeScript
- Homepage: https://refilter.swypex.com
- Size: 1.34 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@swypex/refilter)
@swypex/refilter
[](https://www.npmjs.com/package/@swypex/refilter)
[](https://github.com/useswype/refilter/)
[](https://github.com/useswype/refilter/pulls)
[](https://github.com/useswype/refilter/issues)
[](/LICENSE)
---
A powerful and flexible React library to effortlessly add robust filtering capabilities to your applications, simplifies
creating dynamic and interactive user interfaces, allowing users to filter through large datasets easily.
## 📝 Table of Contents
- [About](#-about)
- [Getting Started](#-getting-started)
- [Usage](#-usage)
- [Built Using](#-built-using)
- [Contributing](https://github.com/useswype/refilter/graphs/contributors)
## 🧐 About
This package is an ideal solution for implementing advanced, strongly-typed filtering systems. By focusing on managing
filter states and interactions, it allows developers to invest their time when it matters most: creating tailored
filter UIs and handling business logic.
### Key Features
- Simplified State Management: Offload the complexity of managing filter states, freeing you to focus on building
filter-specific UI and business logic.
- Dynamic Badge System: Automatically generate badges for applied filters, offering quick access to remove or modify
them.
- Customizable UI: Define the rendering of badges, side panel items & content for each filter.
- Overridable Styles: Customize all class names, or use the provided HOC to style the component once and return a
tailored version.
- Strongly Typed: Built with TypeScript, ensuring a type-safe and robust developer experience.
## 🎥 Demo / Working
[Live Demo](https://refilter.swypex.com)
## 💭 Preview
## 🏁 Getting Started
### Installation
Make sure you have node version >= 16 and react version >= 16
```bash
npm i @swypex/refilter
```
Import this style sheet
```css
@import '~@swypex/refilter/output/main.css';
```
## 🎈 Usage
### Default Swypex design
```tsx
import { GenericFilter } from '@swypex/refilter';
```
### Custom styled generic filter
```tsx
import { createStyledGenericFilter } from '@swypex/refilter';
export const StyledGenericFilter = createStyledGenericFilter({
closeButton: 'bg-red-100',
});
import { StyledGenericFilter as GenericFilter } from '@/components/GenericFilterWrapper';
```
### Specific style for the filter
```tsx
import { GenericFilter } from '@swypex/refilter';
```
## How to create your filter component
### the filter component has the constant boilerplate code you need to follow
```tsx
export interface FilterComponentValue {
value: Nullable;
}
export function FilterComponent(
props: FilterComponentProps
) {
const { onChange, value } = props;
return
;
}
function FilterComponentFilterShortcut(
props: ShortcutComponentProps
) {
const { value, onChange } = props;
return
;
}
FilterComponent.Shortcut = FilterComponentFilterShortcut;
FilterComponent.comparator = (
a: FilterComponentValue,
b: FilterComponentValue
) => {
return a.value === b.value;
};
FilterComponent.getBadgeCount = (value: FilterComponentValue) => {
return value.value !== null ? 1 : 0;
};
```
## ⛏️ Built Using
- [React](https://react.dev/)
- [Tailwind](https://tailwindcss.com/)
- [Typescript](https://www.typescriptlang.org/)
- [Rollup](https://rollupjs.org/)