FilterTag
FilterTag
is an interactive component used to activate a filter on a large dataset.
- Use when you want to filter data on a few parameters
- Consider Checkbox if you have an extensive list of parameters you want to filter on
- FilterTag implements an
a
tag- All native props will be forwarded to the element
- Expects an
href
to a URL that returns filtered results- This event can be intercepted with an
onClick
, but the anchor should still load a page with the current filtered data even if JS is disabled
- This event can be intercepted with an
This example will toggle the active state based on the URL filter parameter; only one filter can be applied in this basic example.
Name | Type | Default | Description |
---|---|---|---|
active | boolean | If true , the filter will marked as active | |
children | ReactNode | The content of the Tag | |
href | string | URL to a filtered dataset; often includes URL parameters |
- FilterTag is a straight-forward component that does not require special consideration for accessibility
The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.
render(<><FilterTag active href="/?lasagna=true">Meatloaf</FilterTag><FilterTag href="/?lasagna=true&meatloaf=true">Lasagna</FilterTag></>,);const meatloafFilter = getByText('Meatloaf');expect(meatloafFilter.href).toEqual('/?lasagna=true');expect(meatloafFilter).toHaveTextContent('Remove:');const lasagnaFilter = getByText('Lasagna');expect(lasagnaFilter.href).toEqual('/?lasagna=true&meatloaf=true');expect(lasagnaFilter).toHaveTextContent('Add:');