Sign in
3.2.2

mixitup()

mixitup(container [,config] [,foreignDoc])

Type Name Description
@param Element, string container A DOM element or selector string representing the container(s) on which to instantiate MixItUp.
@param object [config] An optional "configuration object" used to customize the behavior of the MixItUp instance.
@param object [foreignDoc] An optional reference to a `document`, which can be used to control a MixItUp instance in an iframe.
@return mixitup.Mixer A "mixer" object holding the MixItUp instance.

The mixitup() “factory” function creates and returns individual instances of MixItUp, known as "mixers", on which API methods can be called.

When loading MixItUp via a script tag, the factory function is accessed via the global variable mixitup. When using a module loading system (e.g. ES2015, CommonJS, RequireJS), the factory function is exported into your module when you require the MixItUp library.

Example 1: Creating a mixer instance with an element reference

var containerEl = document.querySelector('.container');

var mixer = mixitup(containerEl);

Example 2: Creating a mixer instance with a selector string

var mixer = mixitup('.container');

Example 3: Passing a configuration object

var mixer = mixitup(containerEl, {
    animation: {
        effects: 'fade scale(0.5)'
    }
});

Example 4: Passing an iframe reference

var mixer = mixitup(containerEl, config, foreignDocument);
use()

mixitup.use(extension)

Type Name Description
@param * extension

A reference to the extension or library to be used.
@return void

The .use() static method is used to extend the functionality of mixitup with compatible extensions and libraries in an environment with modular scoping e.g. ES2015, CommonJS, or RequireJS.

You need only call the .use() function once per project, per extension, as module loaders will cache a single reference to MixItUp inclusive of all changes made.

Example 1: Extending MixItUp with the Pagination Extension

import mixitup from 'mixitup';
import mixitupPagination from 'mixitup-pagination';

mixitup.use(mixitupPagination);

// All mixers created by the factory function in all modules will now
// have pagination functionality

var mixer = mixitup('.container');