react-element-query [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-url]][daviddm-image] [![Build Status][travis-image]][travis-url]

Once you start thinking in components, media queries, which are reliant on the size of the whole screen, don't work well because components are frequently not the full screen-width.

Element queries solve this, but CSS won't have element queries for a while. eq.js does a good job, but it doesn't play nicely with React. Besides which, using the React render pipeline has some nice performance and API benefits.

This component is performant, and works on both the server and the client.

Table of Contents generated with DocToc

- Install
- React 15
- React 0.14
- React 0.13
- Usage
- Props
- sizes Required
- makeClassName
- default
- children
- Methods
- [static ElementQuery.register ({component: element, sizes: , node: [, onResize: ]})](#static-elementqueryregister-component-react-element-element-sizes-array-node-domnode-onresize--function)
- static ElementQuery.unregister ( element)
- static ElementQuery.listen()
- static ElementQuery.unregister()
- Developing
- Requirements
- Tests
- License

Install

``sh
npm i -S react-element-query
`

$3

Version 3.0 supports React 15.

`sh
npm i -S react-element-query@3
`

$3

Version 2.0 supports React 0.14.

`sh
npm i -S react-element-query@2
`

$3

If you need react 0.13 compatibility, install version 1.x.

`sh
npm i -S react-element-query@1
`




Usage

`js
import React from 'react'
import ElementQuery from 'react-element-query'
React.render(( sizes={[{name: 'large', width: 300}, {name: 'small', width: 150}]}
>


I have a .small when over 150px and .large when over 300px


), document.createElement('div'))
`

Props

$3

An array of objects containing minimum widths and classnames to apply. [{name: 'large', width: 300}] will apply the class .large to the child when the element is 300px or larger.

$3

Takes the name for the matched size and returns a different classname. Useful if you want to apply a namespace to all your class names.

$3

The server has no way to know the browser window width, and therefore, can't calculate the element width, so by default, it assumes there is no element query class applied. If you'd like to set a different default, pass a size name. Defaults to ''.

$3

The child that will get the element query magic. A few caveats:

* This _must_ be a single child
* This _must_ be a valid DOM element. e.g.