@cocorof/react-filters

A search line and a row of filters, each opening a panel that applies on confirm.

import { FilterBar } from "@cocorof/react-filters";
import "@cocorof/react-filters/styles.css";

<FilterBar
  search={{ value: q, onChange: setQ, onSubmit: run, placeholder: "직무, 회사를 검색해 주세요" }}
  fields={[
    { key: "region", kind: "taxonomy", label: "지역", nodes: REGIONS, max: 5 },
    { key: "job",    kind: "taxonomy", label: "직무", nodes: JOBS },
    { key: "career", kind: "range",    label: "경력", min: 0, max: 20, unit: "년", openEndedLabel: "이상" },
    { key: "type",   kind: "choice",   label: "고용형태", options: TYPES },
  ]}
  value={filters}
  onChange={setFilters}
  counts={facets}
  labels={{ apply: "적용", reset: "선택 초기화", close: "닫기" }}
/>

Why apply-on-confirm

A live filter re-runs the query under the hand that is still choosing, and on a facet list it makes the options move while they are being read. Panels here edit a draft; nothing reaches onChange until Apply, and closing discards.

Taxonomy rules

Picking a branch means everything under it, so a branch and its children are never both selected — choosing a parent clears the children it covers, and choosing a child releases the parent. Otherwise a filter could claim two different things at once with no way to tell which one the list obeyed.

Theming

Everything is a CSS variable on .rfl: --rfl-fg, --rfl-muted, --rfl-bg, --rfl-surface, --rfl-raise, --rfl-border, --rfl-accent, --rfl-accent-fg, --rfl-accent-soft, --rfl-radius, --rfl-radius-sm, --rfl-gap, --rfl-font. Point them at your own tokens and the bar wears your theme, dark mode included.

Exports

FilterBar, FilterModal, TaxonomyPicker, RangePicker, ChoicePicker, DEFAULT_LABELS, and the helpers findTrail, flattenNodes, searchNodes, walk, matchNode, countActive.

MIT.