importOnMediaQuery

Use this function to import components according to a specified media query.

Usage

js

import { importOnMediaQuery
 } from '@studiometa/js-toolkit';

// Import Component.js if the device is in portrait.
importOnMediaQuery
(
  () => import('./components/Component.js'),
  '(orientation: portrait)',
);

Parameters

importFn (() => Promise<Base>): the function to import components
media (string): a media query

Returns

Promise<Base>: a promise resolving to the the component's class

Example

js

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

class App
 extends Base
 {
  static config
 = {
    name
: 'App',
    components
: {
      Component
: () =>
        importOnMediaQuery
(
          () => import('./components/Component.js'),
          '(orientation: portrait)',
        ),
    },
  };
}