# @parallaxagency/conditioner

> ### `@idle`

Latest version **0.0.6** (published 2019-07-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @parallaxagency/conditioner
pnpm add @parallaxagency/conditioner
yarn add @parallaxagency/conditioner
bun add @parallaxagency/conditioner
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2019-07-22 |
| First published | 2019-04-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 185.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | parallaxagency |

## Links

- npm: https://www.npmjs.com/package/@parallaxagency/conditioner
- npm.io page: https://npm.io/package/@parallaxagency/conditioner

## Dependencies (1)

- [compute-scroll-into-view](https://npm.io/package/compute-scroll-into-view.md) ^1.0.11

## Recent versions

- 0.0.6 (latest) — 2019-07-22
- 0.0.5 — 2019-07-11
- 0.0.4 — 2019-06-03
- 0.0.3 — 2019-05-31
- 0.0.2 — 2019-04-15
- 0.0.1 — 2019-04-10

## README

## Monitors

### `@idle`

This monitor will match when [`requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) fires. Once matching it will never unmatch so typically you would use this with the `was` modifier:

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

This monitor uses the [`requestIdleCallback` and `cancelIdleCallback` polyfills from `GoogleChromeLabs/idlize`](https://github.com/GoogleChromeLabs/idlize/blob/master/docs/idle-callback-polyfills.md)

### `@visible`

This monitor uses [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to match when the element is visible in the viewport:

```html
<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](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) to match against the user’s "effective connection type":

```html
<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`](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/) enabled. Consider using the `initial` modifier with this monitor to only check this once on load.

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

### `@screen`

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

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

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

```js
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

---
_Source: https://npm.io/package/@parallaxagency/conditioner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._