loberbichler / lit-media-query

Web component for media queries (like iron-media-query) implemented with LitElement.

lit-media-query

Web component for media queries (like iron-media-query) implemented with LitElement.

See Documentation, Demo.

Installation

npm install lit-media-query --save

Then, import lit-media-query into your element:

import 'lit-media-query/lit-media-query.js';

or in an html file:

<script type="module" src="/path/to/lit-media-query.js"></script>

Usage

In your LitElement class:

static get properties() {
  return {
    _query: { type: String },
    _isMobile: { type: Boolean }
  }
}

constructor() {
  super();
  this._query = '(max-width: 460px)';
  this._isMobile = false;
}

render() {
  return html`
  <lit-media-query
    .query="${this._query}"
    @changed="${this._handleMediaQuery}">
  </lit-media-query>
  `;
}

_handleMediaQuery(event) {
  this._isMobile = event.detail.value;
}

Variable value from the event is a Boolean. Will be true if the media query is fulfilled, otherwise is false.

In this example, when the viewport is less than 460px the variable _isMobile will be true.

Browser compatibility

lit-media-query uses Visual Viewport API which is not yet compatible with all browsers, but it will fall back to window onresize event, increasing the browsers compatibility.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D