react-eq

React Element Queries

NOTE: This is a very early beta.

We liked the way that https://github.com/Snugug/eq.js handled element queries, but we needed something that would work inside of our React components. This implements a similar interface to his implementation.

Usage:

<ElementQuery queries={{ medium: 600, large: 900 }} >
  <div>
    ◻️ ◽️ ◼︎ I'll act differently at 600px and 900px. ◼︎ ◽️ ◻️
  </div>
</ElementQuery>

Result when 600px <= element width < 900px:

<div data-eq-state="medium">
  ◻️ ◽️ ◼︎ I'll act differently at 600px and 900px. ◼︎ ◽️ ◻️
</div>

Result when element width >= 900px:

<div data-eq-state="medium large">
  ◻️ ◽️ ◼︎ I'll act differently at 600px and 900px. ◼︎ ◽️ ◻️
</div>

Events:

When data-eq-state is updated, it will trigger a eq-update event on the div. This event will bubble up to the window.