https://github.com/zachleat/filter-container
Filtering visible child elements based on form field values.
https://github.com/zachleat/filter-container
web-components
Last synced: about 1 year ago
JSON representation
Filtering visible child elements based on form field values.
- Host: GitHub
- URL: https://github.com/zachleat/filter-container
- Owner: zachleat
- License: mit
- Created: 2021-01-22T02:19:37.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-08T19:52:19.000Z (over 1 year ago)
- Last Synced: 2025-03-29T10:06:47.754Z (about 1 year ago)
- Topics: web-components
- Language: HTML
- Homepage: https://zachleat.github.io/filter-container/demo.html
- Size: 26.4 KB
- Stars: 89
- Watchers: 4
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Filter Container
A themeless zero-dependency web component to filter visible child elements based on form field values.
* [Demo](https://zachleat.github.io/filter-container/demo.html)
* [Demo on jamstack.org](https://jamstack.org/generators/) (Filter by Language, Template, or License)
* [Demo on zachleat.com](https://www.zachleat.com/web/) (Filter by blog post category)
## Installation
```
npm install @zachleat/filter-container
```
Please see the demo for sample code. Use:
* ``
* `` for the form element and `` for categories.
* (New in v3) `` (try text, radio, checkbox, etc)
* Add a `data-filter-KEY_NAME="CATEGORY_VALUE"` attribute to _any_ child element of `` to assign both a filter key and category to match on.
### Optional Features
* You can add the CSS for each `KEY_NAME` yourself if you’re server rendering (or not happy with the [browser support of `replaceSync`](https://caniuse.com/mdn-api_cssstylesheet_replacesync)). Prepopulate the server-rendered content on each individual item using this too if you’d like (maybe your page has a server-rendered filter applied).
```css
.filter-KEY_NAME--hide {
display: none;
}
```
* This component will not filter on initialization unless you use ``. By default the form field needs to change for filtering to take place.
* Add the `data-filter-results` attribute to any child element of the component if you’d like us to populate it with the number of results.
* Add a string to this attribute value to customize your Results labels (delimited by `/`). e.g. `data-filter-results="Country/Countries"`
* Add `aria-live="polite"` to this element and screen readers will announce when the text changes.
* Use `` if your content elements may have more than one filter value assigned (in this example delimited by a comma).
* For example, Egypt is in both Africa and Asia: `
## Changelog
### v4.0.0
- `filter-KEY_NAME--hide` CSS is now added automatically via the component—works alongside manually added CSS for proper progressive enhancement.
### v3.0.4
- Add support for `filter-mode="all"` on `` to enable AND-ing filters for all multi-select form elements (checkboxes). Use `filter-mode-KEY_NAME="any"` to override back to the default.
### v3.0.3
- Add support for AND-ing filters across multiple checkboxes. Previously only OR operations were supported.
- Use `filter-mode-KEY_NAME="all"` on `` to enable.
### v3.0.0
- Added support for radio and checkbox inputs for filtering.
- Renamed attributes:
- `data-oninit` renamed to `oninit`
- `data-filter-delimiter` renamed to `delimiter` (only supported on ``)
- `data-filter-skip-url` renamed to `leave-url-alone` (only supported on ``)
## Credits
* [MIT](./LICENSE)