react-sizeme - npm Package Compare versions

Comparing version 2.6.9 to 2.6.10

package.json

 {
   "name": "react-sizeme",
-  "version": "2.6.9",
-  "description": "Make your React Components aware of their dimensions and position.",
+  "version": "2.6.10",
+  "description": "Make your React Components aware of their width and/or height!",
   "license": "MIT",
@@ -6,0 +6,0 @@ "main": "dist/react-sizeme.js",

react-sizeme.d.ts

@@ -5,9 +5,9 @@ /* eslint-disable */
 
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
+
 declare namespace sizeMe {
-  type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
-
   export interface SizeMeProps {
-    size: {
-      width: number | null
-      height: number | null
+    readonly size: {
+      readonly width: number | null
+      readonly height: number | null
     }
@@ -17,8 +17,8 @@ }
   export interface SizeMeOptions {
-    monitorWidth?: boolean
     monitorHeight?: boolean
     monitorPosition?: boolean
+    monitorWidth?: boolean
+    noPlaceholder?: boolean
+    refreshMode?: 'throttle' | 'debounce'
     refreshRate?: number
-    refreshMode?: 'throttle' | 'debounce'
-    noPlaceholder?: boolean
   }
@@ -29,12 +29,20 @@
   }
+
   export class SizeMe extends Component<SizeMeRenderProps> {}
 
-  export const withSize: (
+  export type WithSizeOnSizeCallback = (size: SizeMeProps['size']) => void
+
+  export interface WithSizeProps {
+    onSize?: WithSizeOnSizeCallback
+  }
+
+  export function withSize(
     options?: SizeMeOptions,
-  ) => <P extends object = {}>(
+  ): <P extends object = {}>(
     component: ComponentType<P>,
-  ) => ComponentType<Omit<P, 'size'>>
+  ) => ComponentType<Omit<P, 'size'> & WithSizeProps>
 
   export let noPlaceholders: boolean
 }
+
 declare function sizeMe(
@@ -44,4 +52,4 @@ options?: sizeMe.SizeMeOptions,
   component: ComponentType<P>,
-) => ComponentType<sizeMe.Omit<P, 'size'>>
+) => ComponentType<Omit<P, 'size'> & sizeMe.WithSizeProps>
 
 export = sizeMe

README.md

@@ -0,1 +1,3 @@
+<p>&nbsp;</p>
+
 <p align='center'>
@@ -6,2 +8,4 @@ <img src='https://raw.githubusercontent.com/ctrlplusb/react-sizeme/master/assets/logo.png' width='250'/>
 
+<p>&nbsp;</p>
+
 [![npm](https://img.shields.io/npm/v/react-sizeme.svg?style=flat-square)](http://npm.im/react-sizeme)
@@ -45,2 +49,6 @@ [![MIT License](https://img.shields.io/npm/l/react-sizeme.svg?style=flat-square)](http://opensource.org/licenses/MIT)
 
+<p>&nbsp;</p>
+
+---
+
 ## TOCs
@@ -60,2 +68,6 @@
 
+<p>&nbsp;</p>
+
+---
+
 ## Intro
@@ -67,2 +79,6 @@
 
+<p>&nbsp;</p>
+
+---
+
 ## Installation
@@ -74,2 +90,6 @@
 
+<p>&nbsp;</p>
+
+---
+
 ## Configuration
@@ -114,2 +134,6 @@
 
+<p>&nbsp;</p>
+
+---
+
 ## Component Usage
@@ -145,2 +169,6 @@
 
+<p>&nbsp;</p>
+
+---
+
 ## HOC Usage
@@ -224,2 +252,6 @@
 
+<p>&nbsp;</p>
+
+---
+
 ## Under the hood
@@ -237,2 +269,6 @@
 
+<p>&nbsp;</p>
+
+---
+
 ## Examples
@@ -275,2 +311,6 @@
 
+<p>&nbsp;</p>
+
+---
+
 ## Server Side Rendering
@@ -297,4 +337,8 @@
 
+<p>&nbsp;</p>
+
+---
+
 ## Extreme Appreciation!
 
 We make use of the awesome [element-resize-detector](https://github.com/wnr/element-resize-detector) library. This library makes use of an scroll/object based event strategy which outperforms window resize event listening dramatically. The original idea for this approach comes from another library, namely [css-element-queries](https://github.com/marcj/css-element-queries) by Marc J. Schmidt. I recommend looking into these libraries for history, specifics, and more examples. I love them for the work they did, whithout which this library would not be possible. :sparkle-heart:

No alert changes

Improved metrics

Total package byte prevSize

86304

increased by0.51%

Lines of code

572

increased by0.7%

Number of lines in readme file

334

increased by15.17%

No dependency changes