withBreakpointRender function

The withBreakpointRender function extends a component with conditional rendering based on viewport breakpoints.

It uses window.matchMedia to set a render function based on breakpoints. By testing the viewport size, it can conditionally render a specific set of HTML.

The withBreakpointRender function will test the viewport size and set a specific render function when the component is mounted.

Optionally, breakpoints can be reactive which means the component will re-render automatically based on viewport resizing.

// import it with all other features
import { createCustomElement, withBreakpointRender } from 'https://cdn.skypack.dev/ficusjs@6'

// alternatively, import the function directly
// import { withBreakpointRender } from 'https://cdn.skypack.dev/ficusjs@6/with-breakpoint-render'

// import the renderer and html tagged template literal from the uhtml renderer
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@5/uhtml'

// define a breakpoint configuration
const breakpointConfig = {
  reactive: false,
  breakpoints: {
    992: { method: 'renderTablet' },
    768: { method: 'renderMobile' },
    1200: { method: 'renderDesktop' }
  }
}

// create the component
createCustomElement(
  'breakpoint-component',
  withBreakpointRender(breakpointConfig, {
    renderer,
    renderTablet () {
      return html`<span>Breakpoint render tablet</span>`
    },
    renderMobile () {
      return html`<span>Breakpoint render mobile</span>`
    },
    renderDesktop () {
      return html`<span>Breakpoint render desktop</span>`
    }
  })
)

Breakpoint config

The withBreakpointRender requires a breakpoint config. This sets the viewport widths along with the render functions to use for that breakpoint.

const breakpointConfig = {
  reactive: false,
  breakpoints: {
    992: { method: 'renderTablet' },
    768: { method: 'renderMobile' },
    1200: { method: 'renderDesktop' }
  }
}

The reactive property will make the component automatically re-render when the viewport width changes.

Each breakpoint has a width key and an object containing a method to use at that viewport breakpoint.

The above config results in the following media query list.

only screen and (max-width: 768px)
only screen and (min-width: 769px) and (max-width: 992px)
only screen and (min-width: 1201px)