withBreakpointManager

Use this decorator to create a component that will have the capacity to switch components between different breakpoints.

Usage

import { Base
, withBreakpointManager
 } from '@studiometa/js-toolkit';
import MenuMobile
 from './MenuMobile';
import MenuDesktop
 from './MenuDesktop';

export default class Menu
 extends withBreakpointManager
(Base
, [
  ['xxs xs s', MenuMobile
],
  ['m l xl xxl', MenuDesktop
],
]) {
  static config
 = {
    name
: 'Menu',
  };
}

Parameters

Base (BaseConstructor): The Base class or a class extending it.
options (Array<[string, BaseConstructor]>): Definition for the components to be used for each breakpoints

Return value

BaseConstructor: A child class of the given class which will mount the given components based on the current active breakpoint

Examples

Switch between component classes

In the following example, the MenuMobile class will be mounted along the Menu class on small devices and destroyed on large devices. The MenuDesktop class will be mounted on large devices and destroyed on small ones.

The root element this.$el of each class will be the same.

import { Base
, withBreakpointManager
 } from '@studiometa/js-toolkit';
import MenuMobile
 from './MenuMobile';
import MenuDesktop
 from './MenuDesktop';

export default class Menu
 extends withBreakpointManager
(Base
, [
  ['xxs xs s', MenuMobile
],
  ['m l xl xxl', MenuDesktop
],
]) {
  static config
 = {
    name
: 'Menu',
  };
}

TIP

See the resize service documentation on breakpoints for a more comprehensive view of the potential values of the activeBreakpoint property.

withBreakpointManager ​

Usage ​

Parameters ​

Return value ​

Examples ​

Switch between component classes ​