\r\n );\r\n}\r\n```\r\n\r\n\r\n```typescript\r\nimport SelectorChips, { ChipOption, SelectorChipsProps } from '@aniruddha1806/selector-chips';\r\nimport { useState } from 'react';\r\n\r\ninterface FilterOption {\r\n id: string;\r\n name: string;\r\n count: number;\r\n}\r\n\r\nconst FilterComponent: React.FC = () => {\r\n const [selectedFilters, setSelectedFilters] = useState([]);\r\n \r\n // Your data from API or elsewhere\r\n const filterData: FilterOption[] = [\r\n { id: 'filter1', name: 'Popular', count: 120 },\r\n { id: 'filter2', name: 'New', count: 42 },\r\n { id: 'filter3', name: 'Sale', count: 38 }\r\n ];\r\n \r\n // Transform your data to match ChipOption type\r\n const chipOptions: ChipOption[] = filterData.map(filter => ({\r\n id: filter.id,\r\n label: `${filter.name} (${filter.count})`,\r\n tooltip: `${filter.count} items available`\r\n }));\r\n \r\n // Define props with proper types\r\n const selectorProps: SelectorChipsProps = {\r\n options: chipOptions,\r\n defaultSelected: [],\r\n onChange: (ids) => setSelectedFilters(ids as string[]),\r\n showTooltips: true,\r\n layout: 'horizontal'\r\n };\r\n \r\n return (\r\n
\r\n
Filter Products:
\r\n \r\n
\r\n );\r\n};\r\n```\r\n\r\n## Styling\r\n\r\nThe component supports both inline styles and CSS classes for maximum flexibility:\r\n\r\n","readmeFilename":"README.md"}