react-responsive - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

gulpfile.js

@@ -45,2 +45,11 @@ 'use strict';
 
+var staticSampleBundler = watchify(browserify('./samples/static/src/index.jsx', {
+  cache: bundleCache,
+  packageCache: pkgCache,
+  fullPaths: true,
+  standalone: 'sample',
+  debug: true
+}));
+staticSampleBundler.transform(reactify);
+
 gulp.task('watch', function(){
@@ -83,2 +92,11 @@ bundler.on('update', function(){
 
+  var browserifyStream2 = staticSampleBundler.bundle()
+    // browserify -> gulp transfer
+    .pipe(source('index.js'))
+    .pipe(buffer())
+    .pipe(cached('index'))
+    .pipe(sourcemaps.init({loadMaps: true}))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('samples/static/dist'));
+
   var staticStream = gulp.src(['samples/sandbox/src/**/*', '!samples/sandbox/src/**/*.js'])
@@ -88,3 +106,3 @@ .pipe(cached('static-samples'))
 
-  return merge(staticStream, browserifyStream);
+  return merge(staticStream, browserifyStream, browserifyStream2);
 });
@@ -91,0 +109,0 @@

package.json

 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "homepage": "http://github.com/wearefractal/react-responsive",
@@ -27,6 +27,7 @@ "repository": {
     "lodash.omit": "^3.0.0",
+    "matchmedia": "^0.1.1",
     "object-assign": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^0.12.0"
+    "react": "~0.12.0 || ~0.13.0"
   },
@@ -47,3 +48,3 @@ "devDependencies": {
     "mocha": "^1.20.1",
-    "reactify": "^0.14.0",
+    "reactify": "^1.0.0",
     "should": "^4.0.4",
@@ -50,0 +51,0 @@ "vinyl-buffer": "0.0.0",

README.md

@@ -24,8 +24,8 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Support us][gittip-image]][gittip-url]
 
-A mq element functions like any other React component, which means you can nest them and do all the normal jazz.
+A MediaQuery element functions like any other React component, which means you can nest them and do all the normal jazz.
 
 ### Using CSS Media Queries
 
-```js
-var mq = require('react-responsive');
+```jsx
+var MediaQuery = require('react-responsive');
 
@@ -37,23 +37,23 @@ var A = React.createClass({
         <div>Device Test!</div>
-        <mq query='(min-device-width: 1224px)'>
+        <MediaQuery query='(min-device-width: 1224px)'>
           <div>You are a desktop or laptop</div>
-          <mq query='(min-device-width: 1824px)'>
+          <MediaQuery query='(min-device-width: 1824px)'>
             <div>You also have a huge screen</div>
-          </mq>
-          <mq query='(max-width: 1224px)'>
+          </MediaQuery>
+          <MediaQuery query='(max-width: 1224px)'>
             <div>You are sized like a tablet or mobile phone though</div>
-          </mq>
-        </mq>
-        <mq query='(max-device-width: 1224px)'>
+          </MediaQuery>
+        </MediaQuery>
+        <MediaQuery query='(max-device-width: 1224px)'>
           <div>You are a tablet or mobile phone</div>
-        </mq>
-        <mq query='(orientation: portrait)'>
+        </MediaQuery>
+        <MediaQuery query='(orientation: portrait)'>
           <div>You are portrait</div>
-        </mq>
-         <mq query='(orientation: landscape)'>
+        </MediaQuery>
+         <MediaQuery query='(orientation: landscape)'>
           <div>You are landscape</div>
-        </mq>
-        <mq query='(min-resolution: 2dppx)'>
+        </MediaQuery>
+        <MediaQuery query='(min-resolution: 2dppx)'>
           <div>You are retina</div>
-        </mq>
+        </MediaQuery>
       </div>
@@ -76,4 +76,4 @@ );
 
-```js
-var mq = require('react-responsive');
+```jsx
+var MediaQuery = require('react-responsive');
 
@@ -85,23 +85,23 @@ var A = React.createClass({
         <div>Device Test!</div>
-        <mq minDeviceWidth={1224}>
+        <MediaQuery minDeviceWidth={1224}>
           <div>You are a desktop or laptop</div>
-          <mq minDeviceWidth={1824}>
+          <MediaQuery minDeviceWidth={1824}>
             <div>You also have a huge screen</div>
-          </mq>
-          <mq maxWidth={1224}>
+          </MediaQuery>
+          <MediaQuery maxWidth={1224}>
             <div>You are sized like a tablet or mobile phone though</div>
-          </mq>
-        </mq>
-        <mq maxDeviceWidth={1224}>
+          </MediaQuery>
+        </MediaQuery>
+        <MediaQuery maxDeviceWidth={1224}>
           <div>You are a tablet or mobile phone</div>
-        </mq>
-        <mq orientation='portrait'>
+        </MediaQuery>
+        <MediaQuery orientation='portrait'>
           <div>You are portrait</div>
-        </mq>
-         <mq orientation='landscape'>
+        </MediaQuery>
+         <MediaQuery orientation='landscape'>
           <div>You are landscape</div>
-        </mq>
-        <mq minResolution='2dppx'>
+        </MediaQuery>
+        <MediaQuery minResolution='2dppx'>
           <div>You are retina</div>
-        </mq>
+        </MediaQuery>
       </div>
@@ -113,2 +113,48 @@ );
 
+### Server rendering
+
+Server rendering can be done by passing static values through the `values` property.
+
+The values property can contain `orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`,
+`height`, `deviceHeight`, `width`, `deviceWidth`, `color`, `colorIndex`, `monochrome`,
+ `resolution` and `type` to be matched against the media query.
+
+`type` can be one of: `all`, `grid`, `aural`, `braille`, `handheld`, `print`, `projection`,
+`screen`, `tty`, `tv` or `embossed`.
+
+```jsx
+var MediaQuery = require('react-responsive');
+
+var A = React.createClass({
+  render: function(){
+    return (
+      <div>
+        <div>Device Test!</div>
+        <MediaQuery minDeviceWidth={1224} values={{deviceWidth: 1600}}>
+          <div>You are a desktop or laptop</div>
+          <MediaQuery minDeviceWidth={1824}>
+            <div>You also have a huge screen</div>
+          </MediaQuery>
+          <MediaQuery maxWidth={1224}>
+            <div>You are sized like a tablet or mobile phone though</div>
+          </MediaQuery>
+        </MediaQuery>
+        <MediaQuery maxDeviceWidth={1224}>
+          <div>You are a tablet or mobile phone</div>
+        </MediaQuery>
+        <MediaQuery orientation='portrait'>
+          <div>You are portrait</div>
+        </MediaQuery>
+         <MediaQuery orientation='landscape'>
+          <div>You are landscape</div>
+        </MediaQuery>
+        <MediaQuery minResolution='2dppx'>
+          <div>You are retina</div>
+        </MediaQuery>
+      </div>
+    );
+  }
+});
+```
+
 ## Browser Support
@@ -153,2 +199,2 @@
 [npm-url]: https://npmjs.org/package/react-responsive
-[npm-image]: http://img.shields.io/npm/v/react-responsive.svg
+[npm-image]: http://img.shields.io/npm/v/react-responsive.svg

src/index.js

@@ -1,3 +0,1 @@
-/* global window */
-
 'use strict';
@@ -7,9 +5,11 @@
 var omit = require('lodash.omit');
+var matchMedia = require('matchmedia');
+var hyphenate = require('react/lib/hyphenateStyleName');
 var mediaQuery = require('./mediaQuery');
 var toQuery = require('./toQuery');
-var matchMedia = typeof window !== 'undefined' ? window.matchMedia : null;
 
 var defaultTypes = {
-  component: React.PropTypes.func,
-  query: React.PropTypes.string
+  component: React.PropTypes.node,
+  query: React.PropTypes.string,
+  values: React.PropTypes.shape(mediaQuery.matchers)
 };
@@ -25,3 +25,4 @@ var mediaKeys = Object.keys(mediaQuery.all);
     return {
-      component: React.DOM.div
+      component: 'div',
+      values: {}
     };
@@ -45,2 +46,3 @@ },
   updateQuery: function(props){
+    var values;
     if (props.query) {
@@ -55,3 +57,12 @@ this.query = props.query;
     }
-    this._mql = matchMedia(this.query);
+
+    if (props.values) {
+      values = Object.keys(props.values)
+        .reduce(function(result, key){
+          result[hyphenate(key)] = props.values[key];
+          return result;
+        }, {});
+    }
+
+    this._mql = matchMedia(this.query, values);
     this._mql.addListener(this.updateMatches);
@@ -79,3 +90,3 @@ this.updateMatches();
     var props = omit(this.props, excludedPropKeys);
-    return this.props.component(props, this.props.children);
+    return React.createElement(this.props.component, props, this.props.children);
   }
@@ -82,0 +93,0 @@ });

src/mediaQuery.js

@@ -9,4 +9,4 @@ var PropTypes = require('react/lib/ReactPropTypes');
 
-var features = {
-  // media features
+// properties that match media queries
+var matchers = {
   orientation: PropTypes.oneOf([
@@ -23,35 +23,44 @@ 'portrait',
   aspectRatio: PropTypes.string,
+  deviceAspectRatio: PropTypes.string,
+
+  height: stringOrNumber,
+  deviceHeight: stringOrNumber,
+
+  width: stringOrNumber,
+  deviceWidth: stringOrNumber,
+
+  color: PropTypes.bool,
+
+  colorIndex: PropTypes.bool,
+
+  monochrome: PropTypes.bool,
+  resolution: stringOrNumber
+};
+
+// media features
+var features = {
   minAspectRatio: PropTypes.string,
   maxAspectRatio: PropTypes.string,
-  deviceAspectRatio: PropTypes.string,
   minDeviceAspectRatio: PropTypes.string,
   maxDeviceAspectRatio: PropTypes.string,
 
-  height: stringOrNumber,
   minHeight: stringOrNumber,
   maxHeight: stringOrNumber,
-  deviceHeight: stringOrNumber,
   minDeviceHeight: stringOrNumber,
   maxDeviceHeight: stringOrNumber,
 
-  width: stringOrNumber,
   minWidth: stringOrNumber,
   maxWidth: stringOrNumber,
-  deviceWidth: stringOrNumber,
   minDeviceWidth: stringOrNumber,
   maxDeviceWidth: stringOrNumber,
 
-  color: PropTypes.bool,
   minColor: PropTypes.number,
   maxColor: PropTypes.number,
 
-  colorIndex: PropTypes.bool,
   minColorIndex: PropTypes.number,
   maxColorIndex: PropTypes.number,
 
-  monochrome: PropTypes.bool,
   minMonochrome: PropTypes.number,
   maxMonochrome: PropTypes.number,
 
-  resolution: stringOrNumber,
   minResolution: stringOrNumber,
@@ -61,4 +70,7 @@ maxResolution: stringOrNumber
 
+assign(features, matchers);
+
 // media types
 var types = {
+  all: PropTypes.bool,
   grid: PropTypes.bool,
@@ -80,6 +92,10 @@ aural: PropTypes.bool,
 
+// add the type property
+assign(matchers, { type: Object.keys(types) });
+
 module.exports = {
   all: all,
   types: types,
+  matchers: matchers,
   features: features
 };

No alert changes

Improved metrics

Total package byte prevSize

1057936

increased by0.38%

Number of package files

14

increased by7.69%

Lines of code

13031

increased by0.53%

Number of lines in readme file

195

increased by31.76%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedmatchmedia@^0.1.1

• + Addedcss-mediaquery@0.1.2(transitive)

• + Addedmatchmedia@0.1.2(transitive)

• + Addedreact@0.13.3(transitive)

• - Removedreact@0.12.2(transitive)