---
alias: "fc.scanner.barcodeFilter"
aliases:
  - fc.scanner.barcodeFilter
category: content
module: Core
---

# fc.scanner.barcodeFilter

Combined barcode scanner and text filter component that renders a sticky filter bar with hardware barcode scanner support, text input filtering, and optional camera scanner integration.

## When to Use
- Add barcode scanning and text filtering above a list (pick, pack, count workflows)
- Enable hardware barcode scanner input on store/warehouse pages
- Provide a combined scan + filter experience with match count display

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `onFilter` | `(value: string) => void` | Yes* | Callback when the text filter value changes |
| `onScan` | `(value: string) => boolean \| undefined` | Yes* | Callback when a barcode is scanned. Return `true` to indicate a match. |
| `setValue` | `(value: string) => void` | Yes* | Setter for the filter input value |
| `value` | string | No | Current filter input value |
| `debounceTimeout` | number | No | Debounce timeout for hardware scanner input (ms) |
| `placeholderText` | string[] | No | i18n key array for the filter placeholder text. Default: `["fc.barcodeFilter.placeholder", "Filter results"]` |
| `showingText` | string[] | No | i18n key array for the match count text. Supports `{{currentCount}}` and `{{totalCount}}` template vars. Default: `["fc.barcodeFilter.list.count", "Showing {{currentCount}} of {{totalCount}} items"]` |
| `currentCount` | number | No | Current number of filtered/matching items |
| `totalCount` | number | No | Total number of items before filtering |
| `enableCameraScanner` | boolean | No | Enable the camera scanner button on mobile devices (opens `fc.scanner.camera`) |
| `camera` | object | No | Camera configuration props passed to `fc.scanner.camera` |

*These callbacks are typically provided by the parent `fc.quantity.list` or a custom wrapper, not directly in manifest JSON.

## Data Binding
This component does not consume data directly. It provides filter/scan callbacks that the parent list component uses to filter its data.

## Descendants
No -- self-contained filter/scanner component.

## Composition Patterns
- `fc.quantity.list` automatically renders `fc.scanner.barcodeFilter` when `scannerProps` is provided
- Can be used standalone above any list via programmatic integration
- Integrates with `fc.scanner.camera` on mobile for camera-based barcode scanning

## Gotchas
- If any of `onFilter`, `onScan`, or `setValue` are missing, the component renders nothing (returns `null`).
- The filter bar is sticky (`position: sticky`, `top: -21px`) and floats above the list content as the user scrolls.
- Hardware barcode scanner detection is handled by `SimpleScanner` (a hidden input that captures rapid keystrokes).
- The camera scanner button only appears on mobile devices (`isMobile` from `react-device-detect`) and only when `enableCameraScanner` is `true`.
- When active, the filter bar shows a count indicator (e.g. "Showing 3 of 15 items") styled as a secondary-colored banner.
- When stuck to the top (scrolled), the card changes to square corners with elevation 3 and wider width to span the page.
- Registered with category `content` in the component registry.

## Manifest Example
```json
{
  "component": "fc.scanner.barcodeFilter",
  "props": {
    "placeholderText": ["fc.barcodeFilter.placeholder", "Scan or type to filter..."],
    "showingText": ["fc.barcodeFilter.list.count", "Showing {{currentCount}} of {{totalCount}} items"],
    "enableCameraScanner": true,
    "debounceTimeout": 300
  }
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
