Filterizr Documentation

You can install Filterizr as a dependency using npm or yarn. This provides the main entry point via filterizr.min.js in the ./dist/ directory, which supports CommonJS and ES6 imports.

npm install filterizr

yarn add filterizr

If you are using npm/yarn and want to use Filterizr as a jQuery plugin, import both jquery and filterizr, then call the static method Filterizr.installAsJQueryPlugin passing the jQuery instance. This extends the $.fn prototype.

import $ from 'jquery';
import Filterizr from 'filterizr';

// This will extend the $.fn prototype with Filterizr
Filterizr.installAsJQueryPlugin($);

$('.filter-container').filterizr('filter', 5); // or any other Filterizr API call

When using npm/yarn, you can import the vanilla JavaScript library using the default export:

import Filterizr from 'filterizr'

The following files are available in the ./dist/ directory:

• filterizr.min.js: The pure Filterizr JavaScript library (main entry point for npm/ES6/CommonJS).
• vanilla.filterizr.min.js: Distribution for direct use in <script> tags (exposes global Filterizr).
• jquery.filterizr.min.js: Distribution for use as a jQuery plugin (extends global jQuery and exposes vanilla Filterizr as a global).

Filterizr is a JavaScript library for sorting, shuffling, and applying CSS3 filters to responsive galleries. You can use the library by importing the default export from the filterizr package and instantiating it with a target container and an options object.

import Filterizr from 'filterizr';

const filterizr = new Filterizr({
  // options
}, '#gallery-container');

The Filterizr class is the primary entrypoint for the library. It is exported as the default export from the package. You can import it to initialize and control your image gallery.

To use it, import the default export and instantiate it with a selector for your gallery container.

import Filterizr from 'filterizr';

const filterizr = new Filterizr({
  // configuration options go here
});

The FilterizrState type represents the current operational state of the Filterizr instance. It can be one of the following four values:

• 'IDLE': The instance is inactive or waiting for input.
• 'FILTERING': The instance is currently executing a filtering operation.
• 'SORTING': The instance is currently executing a sorting operation.
• 'SHUFFLING': The instance is currently executing a shuffling operation.

export type FilterizrState = 'IDLE' | 'FILTERING' | 'SORTING' | 'SHUFFLING';

The Layout type defines the available arrangement strategies for the items in the grid. When initializing or updating Filterizr, you can choose from the following layout modes:

• 'horizontal': Items are arranged horizontally.
• 'vertical': Items are arranged vertically.
• 'sameHeight': Items are aligned to have the same height.
• 'sameWidth': Items are aligned to have the same width.
• 'sameSize': Items are aligned to have the same dimensions (width and height).
• 'packed': Items are arranged in a packed/masonry-style layout.

export type Layout =
  | 'horizontal'
  | 'vertical'
  | 'sameHeight'
  | 'sameWidth'
  | 'sameSize'
  | 'packed';

The Filter type defines how items can be categorized for filtering operations. A filter can be a single string representing one category, or an array of strings string[] representing multiple categories.

export type Filter = string | string[];