v0.3.0

- Added makeElementQuery decorator

Author: Federico Zivolo

README.md

@@ -3,7 +3,7 @@
 React component designed to let you conditionally render pieces of UI based on
 a set of element (media) queries defined by you.
 
-The best thing? It weights 600 bytes gzipped (1.3KB minified) and its only
+The best thing? It weights ~800 bytes gzipped (1.9KB minified) and its only
 dependency is [react-resize-aware](https://github.com/FezVrasta/react-resize-aware)
 which weights only 1.2KB gzipped!
 
@@ -42,8 +42,30 @@ And if you need some more power, you can invert the behavior of a selector:
 <Matches sm={false}>I match only when `sm` isn't matching</Matches>
 ```
 
+### Need more power?
+
+You can enhance your component to provide it a `matches` property you can
+use to programmatically check for one or more element queries.  
+You simply have to provide a `getRef` property assigned as `ref` callback,
+make it render its `children` and use the `matches` property as follows:
+
+```jsx
+import { makeElementQuery } from 'react-element-queries';
+const App = (getRef, children, matches) =>
+  <div ref={getRef} style={{ color: matches('sm') ? 'yellow' : 'pink' }}>
+    <Matches sm>🐣</Matches>
+    {children}
+  </div>
+
+const EnhancedApp = makeElementQuery(
+  App,
+  { sm: { maxWidth: 200 }, lg: { minWidth: 201 } }
+);
+```
+
 ## Docs
 
+### Queries
 The `queries` property is an object with a list of properties of your choice,
 you can name them how you prefer, for instance, you could have `sm` or `small` or
 `verySmallMatcher`:
@@ -57,11 +79,24 @@ Each property contains an object with one or more expressions.
 So far, the supported expressions are: `maxWidth`, `minWidth`, `maxHeight` and
 `minHeight`.
 
+### `<Matches />` component
 Once you have defined your element queries, you can use the `<Matches />` component
 to conditionally render a piece of UI.  
 Simply add to it one or more element queries names to tell it to display its content
 when at least one of the matches the given expressions.
 
+### `matches` property
+When you enhance your component with `makeElementQuery`, your component will get
+access to the `matches` property.  
+This is a function you can call programmatically to perform any kind of operation
+with the result of the element queries you provide it.
+
+```js
+matches('sm') // true if `sm` is matching
+matches('sm', 'lg') // true if `sm` and/or `lg` are matching
+matches({ sm: false }) // true when `sm` isn't matching
+matches({ sm: false }, 'lg') // true when `sm` doesn't match and `lg` does
+```
 
 # Credits
 

docs/example.js

@@ -24,49 +24,53 @@ function _objectWithoutProperties(obj, keys) {
   return target;
 }
 
-function MyComponent(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    getRef = _ref.getRef,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, ['getRef', 'children']);
+const MyComponent = ReactElementQueries.makeElementQuery(
+  function MyComponent(_ref) {
+    var getRef = _ref.getRef,
+      children = _ref.children,
+      matches = _ref.matches,
+      props = _objectWithoutProperties(_ref, ['getRef', 'children', 'matches']);
 
-  return React.createElement(
-    'div',
-    _extends({className: 'example', ref: getRef}, props),
-    React.createElement(
-      'p',
-      null,
-      "Hover me! I'm based on",
+    return React.createElement(
+      'div',
+      _extends({className: 'example', ref: getRef}, props),
       React.createElement(
-        'a',
-        {href: 'https://github.com/FezVrasta/react-resize-aware'},
-        'react-resize-aware'
+        'p',
+        null,
+        "Hover me! I'm based on",
+        React.createElement(
+          'a',
+          {href: 'https://github.com/FezVrasta/react-resize-aware'},
+          'react-resize-aware'
+        ),
+        'and let you render pieces of UI based on your own element queries!'
       ),
-      'and let you render pieces of UI based on your own element queries!'
-    ),
-    React.createElement(
-      ReactElementQueries.Matches,
-      {sm: true},
-      'small 🐣 (pio?)'
-    ),
-    React.createElement(
-      ReactElementQueries.Matches,
-      {lg: true},
-      'large 🐷 (oink!)'
-    )
-  );
-}
+      React.createElement(
+        ReactElementQueries.Matches,
+        {sm: true},
+        'small 🐣 (pio?)'
+      ),
+      React.createElement(
+        ReactElementQueries.Matches,
+        {lg: true},
+        'large 🐷 (oink!)'
+      ),
+      React.createElement('input', {
+        className: matches('sm') ? 'sm' : null,
+        placeholder: "I'm yellow when 🐣 is visible",
+        style: {width: 200, display: 'block'},
+      }),
+      children
+    );
+  },
+  {
+    sm: {maxHeight: 150},
+    lg: {minHeight: 151},
+  }
+);
 
 function App() {
-  return React.createElement(
-    ReactElementQueries.ElementQuery,
-    {
-      style: {position: 'relative'},
-      queries: {sm: {maxHeight: 100}, lg: {minHeight: 101}},
-    },
-    React.createElement(MyComponent)
-  );
+  return React.createElement(MyComponent);
 }
 
 ReactDOM.render(

docs/index.html

@@ -18,11 +18,16 @@
       width: 100%;
       color: white;
       transition: 1s all ease-in-out;
+      padding: 1em;
+      position: relative;
     }
     .example:hover {
       height: 200px;
       width: 80vw;
     }
+    .sm {
+      background-color: #FFC31B;
+    }
     </style>
   </head>
   <body>

docs/react-element-queries.js

@@ -1,6 +1,6 @@
 {
   "name": "react-element-queries",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Conditionally render pieces of UI based on element queries",
   "main": "dist/index.js",
   "scripts": {