@opensea/react-media - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
 import { useWindowSize } from './useWindowSize';
-export declare function createMedia<T extends Record<string, number>>(breakpoints: T, initialWindowSize?: Size): {
+export declare function createMedia<TBreakpoints extends Record<string, number>, TSize extends Partial<Size>>(breakpoints: TBreakpoints, initialWindowSize?: TSize): {
     createMediaStyle: () => string;
@@ -11,23 +11,23 @@ Media: (props: ({
     } & {
-        at: keyof T;
+        at: keyof TBreakpoints;
     }) | ({
         children: import("react").ReactNode | ((className: string) => import("react").ReactNode);
     } & {
-        greaterThan: keyof T;
+        greaterThan: keyof TBreakpoints;
     }) | ({
         children: import("react").ReactNode | ((className: string) => import("react").ReactNode);
     } & {
-        greaterThanOrEqual: keyof T;
+        greaterThanOrEqual: keyof TBreakpoints;
     }) | ({
         children: import("react").ReactNode | ((className: string) => import("react").ReactNode);
     } & {
-        between: [keyof T, keyof T];
+        between: [keyof TBreakpoints, keyof TBreakpoints];
     })) => JSX.Element;
-    SizeContext: import("use-context-selector").Context<Size>;
+    SizeContext: import("use-context-selector").Context<TSize & Partial<Size>>;
     SizeProvider: ({ children }: {
         children: import("react").ReactNode;
     }) => JSX.Element;
-    breakpoints: T;
+    breakpoints: TBreakpoints;
 };
 export { useIsHydrated, useWindowSize };
 //# sourceMappingURL=index.d.ts.map

dist/index.modern.js

 import { useReducer, useEffect, useState } from 'react';
 import { useContextSelector, createContext } from 'use-context-selector';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash';
 
@@ -5,0 +5,0 @@ let isHydrated = false;

dist/index.module.js

 import { useReducer, useEffect, useState } from 'react';
 import { useContextSelector, createContext } from 'use-context-selector';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash';
 
@@ -5,0 +5,0 @@ var isHydrated = false;

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-context-selector'), require('lodash/throttle')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-context-selector', 'lodash/throttle'], factory) :
-  (global = global || self, factory(global.reactMedia = {}, global.react, global.useContextSelector, global.throttle));
-})(this, (function (exports, react, useContextSelector, throttle) {
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
-
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-context-selector'), require('lodash')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-context-selector', 'lodash'], factory) :
+  (global = global || self, factory(global.reactMedia = {}, global.react, global.useContextSelector, global.lodash));
+})(this, (function (exports, react, useContextSelector, lodash) {
   var isHydrated = false;
@@ -125,3 +121,3 @@ var useIsHydrated = function useIsHydrated() {
       };
-      var onResize = throttle__default["default"](handleResize, 100);
+      var onResize = lodash.throttle(handleResize, 100);
       window.addEventListener('resize', onResize);
@@ -128,0 +124,0 @@ // Call handler right away so state gets updated with initial window size

dist/Media.react.d.ts

 import React from 'react';
-export declare const createMediaComponent: <T extends Record<string, number>>(breakpoints: T, SizeContext: import("use-context-selector").Context<import("./SizeProvider.react").Size>) => (props: ({
+export declare const createMediaComponent: <T extends Record<string, number>>(breakpoints: T, SizeContext: import("use-context-selector").Context<Partial<import("./SizeProvider.react").Size>>) => (props: ({
     children: React.ReactNode | ((className: string) => React.ReactNode);
@@ -4,0 +4,0 @@ } & {

dist/SizeProvider.react.d.ts

@@ -6,11 +6,11 @@ /// <reference types="react" />
 export type Size = {
-    height?: number;
-    width?: number;
+    height: number;
+    width: number;
 };
-type CreateSizeProviderProps = {
-    initialWindowSize: Size;
+type CreateSizeProviderProps<TSize extends Partial<Size>> = {
+    initialWindowSize: TSize;
 };
-export declare const createSizeProvider: ({ initialWindowSize }: CreateSizeProviderProps) => {
+export declare const createSizeProvider: <TSize extends Partial<Size>>({ initialWindowSize }: CreateSizeProviderProps<TSize>) => {
     SizeProvider: ({ children }: SizeProviderProps) => JSX.Element;
-    SizeContext: import("use-context-selector").Context<Size>;
+    SizeContext: import("use-context-selector").Context<TSize & Partial<Size>>;
 };
@@ -17,0 +17,0 @@ export type SizeContext = ReturnType<typeof createSizeProvider>['SizeContext'];

dist/useWindowSize.d.ts

@@ -1,7 +0,3 @@
-type WindowSize = {
-    height: number;
-    width: number;
-};
-export declare const useWindowSize: <T extends Partial<WindowSize>>(initialWindowSize?: T) => T;
-export {};
+import { Size } from './SizeProvider.react';
+export declare const useWindowSize: <T extends Partial<Size>>(initialWindowSize?: T) => T;
 //# sourceMappingURL=useWindowSize.d.ts.map

package.json

 {
   "name": "@opensea/react-media",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Javascript library to deal with media queries in isomorphic React applications.",
@@ -36,19 +36,19 @@ "license": "MIT",
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
     "@types/react": "^18.0.33",
-    "@vitejs/plugin-react": "^3.1.0",
-    "@vitest/coverage-c8": "^0.29.8",
-    "concurrently": "^7.6.0",
-    "esbuild": "^0.17.10",
-    "husky": "^8.0.3",
-    "jsdom": "^21.1.1",
-    "lint-staged": "^13.1.2",
-    "microbundle": "^0.15.1",
-    "prettier": "^2.8.4",
-    "prettier-package-json": "^2.8.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "use-context-selector": "^1.4.1",
-    "vitest": "^0.29.8"
+    "@vitejs/plugin-react": "3.1.0",
+    "@vitest/coverage-c8": "0.29.8",
+    "concurrently": "7.6.0",
+    "esbuild": "0.17.10",
+    "husky": "8.0.3",
+    "jsdom": "21.1.1",
+    "lint-staged": "13.1.2",
+    "microbundle": "0.15.1",
+    "prettier": "2.8.4",
+    "prettier-package-json": "2.8.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "use-context-selector": "1.4.1",
+    "vitest": "0.29.8"
   },
@@ -55,0 +55,0 @@ "lint-staged": {

src/index.ts

@@ -7,6 +7,6 @@ import { createMediaComponent } from './Media.react';
 
-export function createMedia<T extends Record<string, number>>(
-  breakpoints: T,
-  initialWindowSize: Size = {}
-) {
+export function createMedia<
+  TBreakpoints extends Record<string, number>,
+  TSize extends Partial<Size>
+>(breakpoints: TBreakpoints, initialWindowSize: TSize = {} as TSize) {
   function createMediaStyle() {
@@ -16,3 +16,3 @@ return generateMediaStyles(breakpoints);
 
-  const { SizeProvider, SizeContext } = createSizeProvider({
+  const { SizeProvider, SizeContext } = createSizeProvider<TSize>({
     initialWindowSize
@@ -19,0 +19,0 @@ });

src/useWindowSize.ts

 import { useEffect, useState } from 'react';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash';
+import { Size } from './SizeProvider.react';
 
-type WindowSize = {
-  height: number;
-  width: number;
-};
-
-export const useWindowSize = <T extends Partial<WindowSize>>(
+export const useWindowSize = <T extends Partial<Size>>(
   initialWindowSize: T = {
@@ -11,0 +7,0 @@ width: undefined,

No alert changes

Improved metrics

Total package byte prevSize

50624

0

Worsened metrics

Lines of code

1182

-0.51%

No dependency changes