resize-observer-component/index.js

Responsive container component

const Nanocomponent = require('nanocomponent')
const ResizeObserver = require('resize-observer-polyfill')

const ro = new ResizeObserver(entries => {
  // Default breakpoints that should apply to all observed
  // elements that don't define their own custom breakpoints.
  const defaultBreakpoints = {sm: 384, md: 576, lg: 768, xl: 960}

  entries.forEach(entry => {
    // If breakpoints are defined on the observed element,
    // use them. Otherwise use the defaults.
    const breakpoints = entry.target.dataset.breakpoints
      ? JSON.parse(entry.target.dataset.breakpoints)
      : defaultBreakpoints

    // Update the matching breakpoints on the observed element.
    Object.keys(breakpoints).forEach(breakpoint => {
      const minWidth = breakpoints[breakpoint]
      if (entry.contentRect.width >= minWidth) {
        entry.target.classList.add(breakpoint)
      } else {
        entry.target.classList.remove(breakpoint)
      }
    })
  })
})

/**
 * @link https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
 */

class ResponsiveContainer extends Nanocomponent {
  createElement (el) {
    return el
  }

  load (el) {
    ro.observe(el)
  }

  unload (el) {
    ro.unobserve(el)
  }

  update () {
    return true
  }
}

module.exports = ResponsiveContainer