withMountOnMediaQuery

Use this decorator to create a component which will mount and destroy itself based on a specified media query.

Usage

import { Base, withMountOnMediaQuery } from '@studiometa/js-toolkit';
import Component from './Component.js';

export default withMountOnMediaQuery(Component, 'not (prefers-reduced-motion)');

Parameters

• Base (BaseConstructor): The Base class or a class extending it.
• media (string): a media query

Return value

• BaseConstructor: A child class of the given class which will be mounted when the media query matches.

API

This decorator does not expose a specific API.

Examples

Simple usage

import { Base, withMountOnMediaQuery } from '@studiometa/js-toolkit';

export default class Component extends withMountOnMediaQuery(
  Base,
  'not (prefers-reduced-motion)',
) {
  static config = {
    name: 'Component',
    log: true,
  };

  mounted() {
    this.$log('Accepts motion!');
  }

  destroyed() {
    this.$log('User enabled reduced motion after mount.');
  }
}

With data option

<div
  data-component="Component"
  data-option-media="not (prefers-reduced-motion)">
  ...
</div>