media-trigger
TypeScript icon, indicating that this package has built-in type declarations

4.0.0 • Public • Published

media-trigger

MediaTrigger is designed to control the response to changes in media queries, allowing you to perform specific actions when entering or exiting a particular media state, or any change to a media state.

npm GitHub package version NPM Downloads

400B gzipped

Demo


Install

$ yarn add media-trigger

Import

import MediaTrigger from 'media-trigger';

Usage

const mediaTrigger = new MediaTrigger({
  media: '(min-width: 992px)',
  entry: (mq) => {
    console.log('Entered media query:', mq.media);
  },
  exit: (mq) => {
    console.log('Exited media query:', mq.media);
  },
  change: (mq) => {
    console.log('Media query change:', mq.media, 'matches:', mq.matches);
  }
});

mediaTrigger.init();

Options

Option Type Default Description
media string Required The media query string to be observed.
entry function | null null Callback function invoked when the media query starts matching (matches becomes true).
exit function | null null Callback function invoked when the media query stops matching (matches becomes false).
change function | null null Callback function invoked on any change in the media query's matching state.

Methods

Method Description
init() Initializes the media query listener and triggers the initial state callbacks.
destroy() Removes the media query listener to stop observing changes.

Example

// Initialize a MediaTrigger instance
const mediaTrigger = new MediaTrigger({
  media: '(max-width: 768px)',
  entry: (mq) => {
    console.log('Screen is now less than or equal to 768px wide.');
  },
  exit: (mq) => {
    console.log('Screen is now wider than 768px.');
  }
});

// Start listening to media query changes
mediaTrigger.init();

// Later, if you want to stop listening
mediaTrigger.destroy();

Browser Support

MediaTrigger relies on the window.matchMedia API, which is supported in all modern browsers. If window.matchMedia is not available, MediaTrigger will safely do nothing.


License

media-trigger is released under MIT license

Package Sidebar

Install

npm i media-trigger

Weekly Downloads

4

Version

4.0.0

License

MIT

Unpacked Size

21.8 kB

Total Files

15

Last publish

Collaborators

  • ux-ui