Monitors

@idle

This monitor will match when requestIdleCallback fires. Once matching it will never unmatch so typically you would use this with the was modifier:

<div data-module="carousel" data-context="was @idle"></div>

This monitor uses the requestIdleCallback and cancelIdleCallback polyfills from GoogleChromeLabs/idlize

@visible

This monitor uses IntersectionObserver to match when the element is visible in the viewport:

<div data-module="carousel" data-context="@visible {threshold}"></div>

In this example the carousel module will mount when the element enters the viewport, and unmount when it leaves. You can use the was modifier to avoid the module being unmounted.

Note: this monitor does not include an IntersectionObserver polyfill

Options

threshold – how much of the element should be visible in order for the monitor to match (between 0 and 1) – default is 0

@connection

Uses the Network Information API to match against the user’s "effective connection type":

<div data-module="carousel" data-context="initial @connection {type}"></div>

Options

type – the connection type: slow-2g, 2g, 3g, or 4g.

@saveData

Matches when the user has Save-Data enabled. Consider using the initial modifier with this monitor to only check this once on load.

<div data-module="carousel" data-context="@saveData"></div>

@screen

This monitor can be used to match against Tailwind CSS screen sizes:

<div data-module="carousel" data-context="@screen {name}"></div>

To use this monitor you will need to provide your Tailwind screens config:

import conditioner, { screen } from '@parallaxagency/conditioner'
import tailwindScreens from './screens.js'

conditioner.addPlugin(screen(tailwindScreens))

Tip: use the not modifier to match the inverse of the media query

Options

name – the Tailwind screen name. e.g. sm

Components

Scroll