Filters Component

A headless, flexible filter component for e-commerce storefronts. Supports facet filters, price range, and custom filter logic. Built with TypeScript, accessibility-first design, and platform-agnostic architecture.

Installation

npm install @haus-storefront-react/filters
# or
yarn add @haus-storefront-react/filters

Usage Example

import { Filters } from '@haus-storefront-react/filters'

const enabledFilters = [
  { type: 'facet', facetCode: 'brand' },
  { type: 'price' },
]
const productListIdentifier = 'main-product-list'

<Filters.Root enabledFilters={enabledFilters} productListIdentifier={productListIdentifier}>
  {(ctx) => (
    <>
      <Filters.Group facetCode="brand">
        {(filter) => filter.values.map(v => (
          <label key={v.id}>
            <Filters.Checkbox facetCode="brand" value={v.id} />
            {v.name}
          </label>
        ))}
      </Filters.Group>
      <Filters.Price>
        {({ min, max, value, setPriceFilter, currencyCode }) => (
          <div>
            <input
              type="range"
              min={min}
              max={max}
              value={value[0]}
              onChange={e => setPriceFilter(Number(e.target.value), value[1])}
            />
            <input
              type="range"
              min={min}
              max={max}
              value={value[1]}
              onChange={e => setPriceFilter(value[0], Number(e.target.value))}
            />
            <span>
              {value[0]} - {value[1]} {currencyCode}
            </span>
          </div>
        )}
      </Filters.Price>
    </>
  )}
</Filters.Root>

Features

• 🧩 Facet and price filtering for product lists
• ♿ Accessibility-first, platform-agnostic
• 🔄 Controlled and uncontrolled filter state
• 🎨 Headless, fully customizable
• ⚡ TypeScript support

API Reference

<Filters.Root>

Context provider for filter functionality.

Props:

• enabledFilters?: EnabledFilter[] – Which filters are enabled
• productListIdentifier?: string – Unique identifier for the filter context
• children: (context) => ReactNode – Render prop with filter context

<Filters.Group>

Groups a facet filter. Must be used inside <Filters.Root>.

• facetCode: string – The facet code to group by
• children: (filter) => ReactNode – Render prop with facet filter data

<Filters.Checkbox>

Checkbox for a facet value. Must be used inside <Filters.Group>.

• facetCode: string – The facet code
• value: string – The value id
• Accepts all <input type="checkbox"> props

<Filters.Price>

Render prop for price range filtering. Must be used inside <Filters.Root>.

• children: ({ min, max, value, setPriceFilter, currencyCode, label }) => ReactNode

See the source code and TypeScript types for full details and advanced usage.