@ehfuse/mui-filter-button

Material-UI 기반의 강력하고 유연한 필터 버튼 컴포넌트 라이브러리입니다.

특징

• 📱 모바일 최적화: 데스크톱은 팝오버, 모바일은 다이얼로그로 자동 전환
• 🎯 다양한 필터 타입: Checkbox, Radio, Date Range, Number Range, Search 등
• 🎨 커스터마이징: 아이콘, 색상, 스타일 자유롭게 변경 가능
• 🔗 그룹화: FilterButtonGroup으로 필터들을 시각적/기능적으로 그룹화
• 📑 모바일 탭: FilterButtonMobileGroup으로 모바일에서 탭 형태로 표시
• ⚡ 전역 상태 관리: @ehfuse/forma 기반의 Provider-less 상태 관리
• 🏷️ 칩 표시: FilterChips로 선택된 필터를 칩 형태로 표시 및 관리
• 🌐 TypeScript: 완전한 타입 지원

설치

npm install @ehfuse/mui-filter-button

기본 사용법

import { FilterButton } from "@ehfuse/mui-filter-button";

function App() {
    const handleChange = (name: string, values: any[]) => {
        console.log("Filter changed:", name, values);
    };

    return (
        <FilterButton
            name="status"
            title="상태"
            type="checkbox"
            showBadge
            options={[
                { value: "active", label: "활성" },
                { value: "inactive", label: "비활성" },
            ]}
            onChange={handleChange}
        />
    );
}

API 시그니처

FilterButton

function FilterButton(props: FilterButtonProps): JSX.Element;

다양한 타입의 필터를 제공하는 메인 컴포넌트입니다.

FilterButtonGroup

function FilterButtonGroup({ children }: { children: ReactNode }): JSX.Element;

필터들을 시각적으로 그룹화하고 자동으로 groupStateId를 제공합니다.

FilterButtonMobileGroup

function FilterButtonMobileGroup({
    children,
}: {
    children: ReactNode;
}): JSX.Element;

FilterButtonGroup을 확장하여 모바일에서 탭으로 표시합니다.

FilterClearButton

function FilterClearButton(props: FilterClearButtonProps): JSX.Element;

모든 필터를 초기화하는 버튼 컴포넌트입니다. tooltipProps를 통해 툴팁의 배경색, 폰트색상, 크기 등을 커스터마이징할 수 있습니다.

FilterSearchDialog

function FilterSearchDialog(props: FilterSearchDialogProps): JSX.Element;

검색 기능이 있는 선택 다이얼로그 컴포넌트입니다.

문서

• 시작하기 - 설치 및 기본 사용법
• API 문서 - 전체 Props 및 API 레퍼런스
• 예제 - 다양한 사용 예제

라이선스

MIT License - Copyright (c) 2025 KIM YOUNG JIN ([email protected])