StringResponsive Module

Switch breakpoints declaratively. StringResponsive evaluates viewport width with matchMedia, toggles DOM fragments tagged for each device band, and emits boolean events whenever a range flips on or off.

Activation primer: Register StringResponsive globally via stringTune.use(StringResponsive)—no per-element string="responsive" marker is required, and string-id is not used. The attributes below simply declare which breakpoints should reveal each fragment.

HTML Attributes

The module hides ineligible elements by applying style.display = 'none'. Inline display styles you set will be restored when the range is active.

Module Snapshot

• Activation: register globally via stringTune.use(StringResponsive) (no per-element string attribute)
• Default ranges: mobile ≤ 359 px, tablet 360–1079 px, laptop 1080–1365 px, desktop ≥ 1366 px
• Config hook: pass settings with { min, max, enable } overrides per device band
• DOM effect: toggles display inline on [string-mobile|tablet|laptop|desktop] elements
• Event bus: emits screen:mobile|tablet|laptop|desktop with a boolean payload on state changes
• Lifecycle: re-evaluates on init and every resize, keeping MatchMedia instances in sync with updated ranges

Basic Usage

import StringTune, { StringResponsive } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();

stringTune.use(StringResponsive, {
  settings: {
    mobile: { max: 767 },
    tablet: { min: 768, max: 1023 },
    desktop: { min: 1440 },
  },
});

stringTune.start(60);

stringTune.on('screen:desktop', (active) => {
  document.body.classList.toggle('is-desktop', active);
});

<header string-mobile>Compact nav</header>
<header string-tablet string-desktop>Wide nav with search</header>

<aside string-laptop string-desktop>
  <nav>Sidebar only when there is room</nav>
</aside>

[string-mobile],
[string-tablet],
[string-laptop],
[string-desktop] {
  transition: opacity 0.2s ease;
}

[style*='display: none'] {
  opacity: 0;
}

How It Works

• Query preparation: four StringResponsiveQueryDevice helpers hold min, max, and enable flags. Defaults cover mobile → desktop in ascending widths.
• Runtime override: when you pass settings, the module rewires each helper, rebuilds its window.matchMedia instance, and optionally disables a band by omitting it.
• State comparison: on init and every resize it evaluates each query; if a band’s matches flag changes it emits the corresponding screen:* boolean and updates internal state caches to avoid duplicate events.
• DOM filtering: the module scans for elements carrying any string-* breakpoint attribute, determines if at least one of their tags is currently active, and sets display accordingly.
• Multiple tags: elements can declare more than one attribute (e.g. string-tablet string-desktop); a single active match keeps them visible.

Event Signals

StringResponsive keeps markup-driven breakpoints expressive—tag the DOM once, stream range changes through the event bus, and delegate width-specific logic without wiring custom media-query listeners by hand.