@djx/breakpoint

Breaking points since '97

Installation

npm install --save @djx/breakpoint

Usage

Make sure you import the component somewehere in your application first:

import '@djx/breakpoint';

You can then use it like normal web components in your markup:

<djx-breakpoint max-width="lg">
  <span>I'm visible from MIN to LG</span>
</djx-breakpoint>
<djx-breakpoint min-width="lg">
  <span>I'm visible at LG</span>
</djx-breakpoint>
<djx-breakpoint min-width="xs" max-width="lg">
  <span>I'm visible from XS to LG</span>
</djx-breakpoint>

The element will only be removed from the slot. The original element itself will not be reattached. If you want to remove all nodes including the one outside of the shadowRoot, you can use the purge property:

<djx-breakpoint purge min-width="lg">
  <span>I will removed completely from the dom under LG</span>
</djx-breakpoint>

Listening for changes

You can easily listen to the changes:

<djx-breakpoint min-width="xs" @visibility-changed="${this.handleVisibility}">
  <span>Notify</span>
</djx-breakpoint>

The BreakpointVisibilityEvent is used for this action

Variables

See here