use-media - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

		@@ -0,1 +1,8 @@
		# [1.3.0](https://github.com/streamich/use-media/compare/v1.2.0...v1.3.0) (2019-03-13)


		### Features

		* add useMediaLayout hook ([6b04735](https://github.com/streamich/use-media/commit/6b04735))

		# [1.2.0](https://github.com/streamich/use-media/compare/v1.1.0...v1.2.0) (2019-02-18)
		@@ -2,0 +9,0 @@

lib/index.d.ts

		@@ -5,2 +5,3 @@ declare type MediaQueryObject = {
		export declare const useMedia: (rawQuery: string \| MediaQueryObject, defaultState?: boolean) => boolean;
		export declare const useMediaLayout: (rawQuery: string \| MediaQueryObject, defaultState?: boolean) => boolean;
		export default useMedia;

lib/index.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var React = require("react");
		var useState = React.useState, useEffect = React.useEffect;
		var useState = React.useState, useEffect = React.useEffect, useLayoutEffect = React.useLayoutEffect;
		var camelToHyphen = function (str) {
		@@ -25,7 +25,7 @@ return str.replace(/[A-Z]/g, function (m) { return "-" + m.toLowerCase(); }).toLowerCase();
		};
		exports.useMedia = function (rawQuery, defaultState) {
		var createUseMedia = function (effect) { return function (rawQuery, defaultState) {
		if (defaultState === void 0) { defaultState = false; }
		var _a = useState(defaultState), state = _a[0], setState = _a[1];
		var query = objectToString(rawQuery);
		useEffect(function () {
		effect(function () {
		var mounted = true;
		@@ -46,3 +46,5 @@ var mql = window.matchMedia(query);
		return state;
		};
		}; };
		exports.useMedia = createUseMedia(useEffect);
		exports.useMediaLayout = createUseMedia(useLayoutEffect);
		exports.default = exports.useMedia;

package.json

		{
		"name": "use-media",
		"version": "1.2.0",
		"version": "1.3.0",
		"description": "useMedia React hook",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

		@@ -8,2 +8,4 @@ # use-media

		With `useEffect`

		```jsx
		@@ -25,1 +27,20 @@ import {useMedia} from 'use-media';
		```

		With `useLayoutEffect`

		```jsx
		import {useMediaLayout} from 'use-media';

		const Demo = () => {
		// Accepts an object of features to test
		const isWide = useMediaLayout({ minWidth: 1000 });
		// Or a regular media query string
		const reduceMotion = useMediaLayout('(prefers-reduced-motion: reduce)');

		return (
		<div>
		Screen is wide: {isWide ? '😃' : '😢'}
		</div>
		);
		};
		```

New alerts