Filtrr helps you to show and hide the elements of your web site, it's customizable and easy to use.
Filtrr helps you to show and hide the elements of your web site, it's customizable and easy to use.
 |  |  |  |  |  |
|---|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | No |
You can use filtrr in two ways, in the case of using a framework like React JS or Angular you should import the file:
npm install filtrr
import { filtrr } from 'filtrr';
Or in case of Vanilla JS you should add the script tag:
<head>
<!-- it sets the constant filtrr -->
<script src="filtrrBrowser.min.js"></script>
</head>
And for both cases, you need to call to filtrr and you can customize it or just use it: * Note: to use transitions is required to import animate.css
// OPTIONAL
filtrr.load({
// active or deactivate the transitions
useTransitions: true,
// transitions in effect
transitionIn: 'fadeInUp',
// transitions out effect
transitionOut: 'fadeOutDown',
// duration of the transitions in ms.
duration: 800
});
// REQUIRED
filtrr.fire();
All the controls that manage what elements to show, must be inside of element with 'controls' class. To identify the filters is necessary that they have the 'filtrr-btn' class. * Note: '-' in the 'data-filter' attribute is the ONLY way to make that filtrr shows everything.
<div class="controls">
<button class="filtrr-btn button" data-filtrr="-">All</button>
<button class="filtrr-btn button" data-filtrr="animal">Animal</button>
<button class="filtrr-btn button" data-filtrr="people">People</button>
<button class="filtrr-btn button" data-filtrr="art">Art</button>
</div>
To relate the filters to the elements, the elements to filter must have the class 'filtrr-elem' and their 'data-elem' must be equal to the 'data-filtrr' of the control.
<img class="filtrr-elem" data-elem="animal" src="image.jpg" alt="cat">
<img class="filtrr-elem" data-elem="animal" src="image.jpg" alt="fox">
<img class="filtrr-elem" data-elem="people" src="image.jpg" alt="friends">
Licensed under MIT license.
FAQs
Filtrr helps you to show and hide the elements of your web site, it's customizable and easy to use.
We found that filtrr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket detected malicious node-ipc versions with obfuscated stealer/backdoor behavior in a developing npm supply chain attack.
Security News
TeamPCP and BreachForums are promoting a Shai-Hulud supply chain attack contest with a $1,000 prize for the biggest package compromise.
Security News
Packagist urges PHP projects to update Composer after a GitHub token format change exposed some GitHub Actions tokens in CI logs.