Element queries for react components.
npm install react-element-queryOnce 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
- Required
-
-
-
- Methods
- [static ElementQuery.register ({component: ](#static-elementqueryregister-component-react-element-element-sizes-array-node-domnode-onresize--function)
- static ElementQuery.unregister (
- static ElementQuery.listen()
- static ElementQuery.unregister()
- Developing
- Requirements
- Tests
- License
``sh`
npm i -S react-element-query
`sh`
npm i -S react-element-query@3
`sh`
npm i -S react-element-query@2
`sh`
npm i -S react-element-query@1
`js.small
import React from 'react'
import ElementQuery from 'react-element-query'
React.render((
>
I have a
when over 150px and .large when over 300px`
), document.createElement('div'))
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.
not Methods
$3
Allows you to use the ElementQuery throttled resize event for your own purposes. This allows you to have only one resize listener attached over your whole app.onResize is an optional callback so that is called with the arguments: . If not defined, the default behavior is used.$3
Once a component is registered, you can unregister it. Do this when the component is unmounted.$3
Manually attach the resize listener. This is called automatically when a component is registered.$3
Manually remove the resize listener. This is called automatically when all components have been unregistered.
Developing
To publish, run npm run release -- [{patch,minor,major}]_NOTE: you might need to
sudo ln -s /usr/local/bin/node /usr/bin/node to ensure node is in your path for the git hooks to work_$3
* npm > 2.0.0 So that passing args to a npm script will work. npm i -g npm
* git > 1.8.3 So that git push --follow-tags will work. brew install git$3
Tests are in tape.*
npm test will run both server and browser tests
* npm run test-browser and npm run test-server run their respective tests
* npm run tdd-server will run the server tests on every file change.
* npm run tdd-browser will run the browser tests on every file change.License
Artistic 2.0 © Joey Baker and contributors. A copy of the license can be found in the file
LICENSE`.
[npm-url]: https://npmjs.org/package/react-element-query
[npm-image]: https://badge.fury.io/js/react-element-query.svg
[travis-url]: https://travis-ci.org/joeybaker/react-element-query
[travis-image]: https://travis-ci.org/joeybaker/react-element-query.svg?branch=master
[daviddm-url]: https://david-dm.org/joeybaker/react-element-query.svg?theme=shields.io
[daviddm-image]: https://david-dm.org/joeybaker/react-element-query