react-media-query-hoc - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.withMedia = exports.MediaQueryProvider = undefined;
+exports.withMedia = exports.MediaQueryProvider = exports.MediaContext = undefined;
 
@@ -19,3 +19,4 @@ var _mediaQueryProvider = require('./media-query-provider');
 
+exports.MediaContext = _mediaQueryProvider.MediaContext;
 exports.MediaQueryProvider = _mediaQueryProvider2.default;
 exports.withMedia = _withMedia2.default;

dist/media-query-provider.js

@@ -44,3 +44,3 @@ 'use strict';
 
-var MediaContext = _react2.default.createContext();
+var MediaContext = _react2.default.createContext({});
 
@@ -47,0 +47,0 @@ var MediaQueryProvider = function (_React$Component) {

package.json

 {
   "name": "react-media-query-hoc",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A dead simple React Higher Order Component (HOC) that uses context for matching media queries",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -10,6 +10,5 @@ # react-media-query-hoc  [![Build Status](https://travis-ci.org/DomainGroupOSS/react-media-query-hoc.svg?branch=master)](https://travis-ci.com/DomainGroupOSS/react-media-query-hoc) ![NPM Version Badge](https://badge.fury.io/js/react-media-query-hoc.svg)
 - Easier to test than other react media query libraries
+- Small [bundlephobia](https://bundlephobia.com/result?p=react-media-query-hoc@latest)
 - Uses [css-mediaquery](https://github.com/ericf/css-mediaquery) which parses and determines if a given CSS Media Query
 matches a set of values (used for server side rendering).
-- Abstracts away the context API, we use the legacy context API internally so we can support React 15 and 16. But as a
-consumer you don't need to worry.
 - You want specific react components being mounted and rendered based on media types
@@ -85,5 +84,4 @@
 
-const MyComponent = ({ media, ...props}) => (
-  if(media.tablet || media.mobile) {
-    ..
+const MyComponent = ({ media, ...props}) => {
+  if (media.tablet || media.mobile) {
     return (
@@ -100,4 +98,4 @@ <div>
     </div>
-  )
-);
+  );
+};
 
@@ -110,2 +108,33 @@ export const BaseMyComponent = MyComponent;
 
+### `MediaContext`
+This is the React Context exported and ready to be used with React `useContext` hook. It has a default value of `{}`, present when the component that consumes the context is not wrapped with `MediaQueryProvider`.
+
+```javascript
+import { MediaContext } from 'react-media-query-hoc';
+import { useContext } from 'react';
+
+const MyComponent = (props) => {
+  const media = useContext(MediaContext);
+
+  if(media.tablet || media.mobile) {
+    return (
+      <div>
+        Mobile and Tablet View
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      Other View
+    </div>
+  );
+};
+
+export default MyComponent;
+
+// default value
+ReactDOM.render(<MyComponent />);     // Renders 'Other View';
+```
+
 ### Server Side Rendering
@@ -112,0 +141,0 @@

src/index.js

@@ -1,7 +0,8 @@
-import MediaQueryProvider from './media-query-provider';
+import MediaQueryProvider, { MediaContext } from './media-query-provider';
 import withMedia from './with-media';
 
 export {
+  MediaContext,
   MediaQueryProvider,
   withMedia,
 };

src/media-query-provider.js

@@ -12,3 +12,3 @@ import React from 'react';
 
-const MediaContext = React.createContext();
+const MediaContext = React.createContext({});
 
@@ -15,0 +15,0 @@ class MediaQueryProvider extends React.Component {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

397447

increased by0.52%

Number of package files

37

increased by2.78%

Lines of code

10795

increased by0.38%

Number of lines in readme file

193

increased by17.68%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes