react-virtualized-auto-sizer - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

dist/react-virtualized-auto-sizer.d.ts

@@ -14,2 +14,3 @@ import { Component, HTMLAttributes, ReactElement } from "react";
     onResize?: (size: Size) => void;
+    tagName?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, "children">;
@@ -16,0 +17,0 @@ type State = {

dist/react-virtualized-auto-sizer.js

@@ -243,3 +243,3 @@ var $8zHUo$react = require("react");
     render() {
-        const { children: children , defaultHeight: defaultHeight , defaultWidth: defaultWidth , disableHeight: disableHeight , disableWidth: disableWidth , nonce: nonce , onResize: onResize , style: style , ...rest } = this.props;
+        const { children: children , defaultHeight: defaultHeight , defaultWidth: defaultWidth , disableHeight: disableHeight , disableWidth: disableWidth , nonce: nonce , onResize: onResize , style: style , tagName: tagName = "div" , ...rest } = this.props;
         const { height: height , width: width  } = this.state;
@@ -266,3 +266,3 @@ // Outer div should not force width/height since that may prevent containers from shrinking.
         }
-        return (0, $8zHUo$react.createElement)("div", {
+        return (0, $8zHUo$react.createElement)(tagName, {
             ref: this._setRef,
@@ -269,0 +269,0 @@ style: {

dist/react-virtualized-auto-sizer.module.js

@@ -233,3 +233,3 @@ import {createElement as $hgUW1$createElement, Component as $hgUW1$Component} from "react";
     render() {
-        const { children: children , defaultHeight: defaultHeight , defaultWidth: defaultWidth , disableHeight: disableHeight , disableWidth: disableWidth , nonce: nonce , onResize: onResize , style: style , ...rest } = this.props;
+        const { children: children , defaultHeight: defaultHeight , defaultWidth: defaultWidth , disableHeight: disableHeight , disableWidth: disableWidth , nonce: nonce , onResize: onResize , style: style , tagName: tagName = "div" , ...rest } = this.props;
         const { height: height , width: width  } = this.state;
@@ -256,3 +256,3 @@ // Outer div should not force width/height since that may prevent containers from shrinking.
         }
-        return (0, $hgUW1$createElement)("div", {
+        return (0, $hgUW1$createElement)(tagName, {
             ref: this._setRef,
@@ -259,0 +259,0 @@ style: {

package.json

 {
   "name": "react-virtualized-auto-sizer",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Standalone version of the AutoSizer component from react-virtualized",
@@ -37,3 +37,3 @@ "author": "Brian Vaughn <[e-mail]> (https://github.com/bvaughn/)",
     "clear": "npm run clear:parcel-cache & npm run clear:builds & npm run clear:node_modules",
-    "clear:builds": "rm -rf ./packages/*/dist",
+    "clear:builds": "rm -rf ./dist",
     "clear:parcel-cache": "rm -rf ./.parcel-cache",
@@ -40,0 +40,0 @@ "clear:node_modules": "rm -rf ./node_modules",

README.md

 # react-virtualized-auto-sizer
 
-> Standalone version of the AutoSizer component from react-virtualized
+Standalone version of the `AutoSizer` component from [`react-virtualized`](https://github.com/bvaughn/react-virtualized).
 
-[![NPM](https://img.shields.io/npm/v/react-virtualized-auto-sizer.svg)](https://www.npmjs.com/package/react-virtualized-auto-sizer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-
 ### If you like this project, [buy me a coffee](http://givebrian.coffee/).
@@ -17,6 +15,84 @@
 
-Please see API documentation of "AutoSizer" in `react-virtualized` package [here](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md).
 
-## License
+| Property      | Type     | Required? | Description                                                                                                                                                     |
+| :------------ | :------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| children      | Function |     ✓     | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number }) => PropTypes.element` |
+| className     | String   |           | Optional custom CSS class name to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary.                              |
+| defaultHeight | Number   |           | Height passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate height after mounting.              |
+| defaultWidth  | Number   |           | Width passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate width after mounting.                |
+| disableHeight | Boolean  |           | Fixed `height`; if specified, the child's `height` property will not be managed                                                                                 |
+| disableWidth  | Boolean  |           | Fixed `width`; if specified, the child's `width` property will not be managed                                                                                   |
+| nonce         | String   |           | Nonce of the inlined stylesheets for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute)                    |
+| onResize      | Function |           | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`.                                           |
+| style         | Object   |           | Optional custom inline style to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary.                                |
+| tagName       | string   |           | Optional HTML tag name for root element; defaults to `"div"` |
 
-MIT © [bvaughn](https://github.com/bvaughn)
+## Examples
+
+Some components (like those found in [`react-window`](https://github.com/bvaughn/react-virtualized) or [`react-window`](https://github.com/bvaughn/react-virtualized)) require numeric width and height parameters. The `AutoSizer` component can be useful if you want to pass percentage based dimensions.
+
+```jsx
+import { AutoSizer } from "react-virtualized-auto-sizer";
+
+// UI
+<AutoSizer>
+  {({ height, width }) => {
+    // Use these actual sizes to calculate your percentage based sizes
+  }}
+</AutoSizer>;
+```
+
+## FAQs
+
+### Can I use this component with flexbox?
+
+Flex containers don't prevent their children from growing and `AutoSizer` greedily grows to fill as much space as possible. Combining the two can be problematic. The simple way to fix this is to nest `AutoSizer` inside of a `block` element (like a `<div>`) rather than putting it as a direct child of the flex container, like so:
+
+```jsx
+<div style={{ display: 'flex' }}>
+  <!-- Other children... -->
+  <div style={{ flex: '1 1 auto' }}>
+    <AutoSizer>
+      {({ height, width }) => (
+        <Component
+          width={width}
+          height={height}
+          {...props}
+        />
+      )}
+    </AutoSizer>
+  </div>
+</div>
+```
+
+### Why is `AutoSizer` passing a height of 0?
+
+`AutoSizer` expands to _fill_ its parent but it will not _stretch_ the parent. This is done to prevent problems with flexbox layouts. If `AutoSizer` is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0.
+
+The solution to this problem is often to add `height: 100%` or `flex: 1` to the parent. One easy way to test this is to add a style property (eg `background-color: red;`) to the parent to visually confirm that it is the expected size.
+
+### Can I use `AutoSizer` to manage only width or height (not both)?
+
+You can use `AutoSizer` to control only one dimension of its child component using the `disableHeight` or `disableWidth` attributes. For example, a fixed-height component that should grow to fill the available width can be created like so:
+
+```jsx
+<AutoSizer disableHeight>
+  {({width}) => <Component height={200} width={width} {...props} />}
+</AutoSizer>
+```
+
+
+### Module parsing fails because of an unexpected token?
+
+This package targets [ECMAScript 2015](https://262.ecma-international.org/6.0/) (ES6) and requires a build tool such as [babel-loader](https://www.npmjs.com/package/babel-loader) that is capable of parsing the ES6 `class` syntax.
+
+### Can this component work with a Content Security Policy?
+
+[The specification of Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#intro)
+describes as the following:
+
+> This document defines Content Security Policy, a mechanism web applications
+> can use to mitigate a broad class of content injection vulnerabilities, such
+> as cross-site scripting (XSS).
+
+To apply Content Security Policy, pass a `nonce` to `AutoSizer` and add a matching `nonce-source` to the `Content-Security-Policy` field in HTTP header.

No alert changes

Improved metrics

Number of lines in readme file

97

increased by340.91%

Worsened metrics

Total package byte prevSize

90365

decreased by-24.87%

Number of package files

9

decreased by-25%

Lines of code

643

decreased by-56.64%

No dependency changes