Deprecated

Project has been merged into arez-dom

---

Arez-MediaQuery

This library provides an Arez browser component that will exposes state indicating whether a CSS media query is matched. If an observer is observing the model then the model listens for changes from the browser and updates the match state as appropriate. However if there is no observer for the state, the model will not listen to to the browser events so as not to have any significant performance impact.

Quick Start

The simplest way to use component;

• add the following dependencies into the build system. i.e.

<dependency>
   <groupId>org.realityforge.arez.mediaquery</groupId>
   <artifactId>arez-mediaquery</artifactId>
   <version>0.23</version>
</dependency>

• add the snippet <inherits name="arez.mediaquery.MediaQuery"/> into the .gwt.xml file.

• Use the MediaQuery component. eg.

import arez.Arez;
import arez.mediaquery.MediaQuery;
import com.google.gwt.core.client.EntryPoint;
import elemental2.dom.DomGlobal;

public class MediaQueryExample
  implements EntryPoint
{
  @Override
  public void onModuleLoad()
  {
    final MediaQuery mediaQuery = MediaQuery.create( "(max-width: 600px)" );
    Arez.context().observer( () ->
                               DomGlobal.document.querySelector( "#status" ).textContent =
                                 "Screen size Status: " + ( mediaQuery.matches() ? "Narrow" : "Wide" ) );
  }
}

More Information

For more information about component, please see the Website. For the source code and project support please visit the GitHub project.

Contributing

The component was released as open source so others could benefit from the project. We are thankful for any contributions from the community. A Code of Conduct has been put in place and a Contributing document is under development.

License

The component is licensed under Apache License, Version 2.0.