Element Queries for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
src
test
.babelrc
.eslintrc.js
.gitignore
README.md
karma.conf.js
package.json
webpack.config.js

README.md

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.