Version 9.12.0 - Added defaultHeight and defaultWidth properties to AutoSizer for SSR

Author: bvaughn

CHANGELOG.md

@@ -1,6 +1,9 @@
 Changelog
 ------------
 
+##### 9.12.0
+* 🎉 Added `defaultWidth` and `defaultHeight` props to `AutoSizer` to better support server-side rendering.
+
 ##### 9.11.1
 * 🐛 `Masonry` component now properly pre-renders as specified by `overscanByPixels`
 

docs/AutoSizer.md

@@ -7,6 +7,8 @@ High-order component that automatically adjusts the width and height of a single
 | Property | Type | Required? | Description |
 |:---|:---|:---:|:---|
 | children | Function | ✓ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number }) => PropTypes.element` |
+| 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) |

package.json

@@ -3,7 +3,7 @@
   "description": "React components for efficiently rendering large, scrollable lists and tabular data",
   "author": "Brian Vaughn <[email protected]>",
   "user": "bvaughn",
-  "version": "9.11.1",
+  "version": "9.12.0",
   "homepage": "https://github.com/bvaughn/react-virtualized",
   "main": "dist/commonjs/index.js",
   "module": "dist/es/index.js",

source/AutoSizer/AutoSizer.jest.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import {findDOMNode} from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
 import {render} from '../TestUtils';
 import AutoSizer from './AutoSizer';
 
@@ -16,6 +17,8 @@ describe('AutoSizer', () => {
     {
       bar = 123,
       ChildComponent = DefaultChildComponent,
+      defaultHeight = undefined,
+      defaultWidth = undefined,
       disableHeight = false,
       disableWidth = false,
       foo = 456,
@@ -43,6 +46,8 @@ describe('AutoSizer', () => {
     return (
       <div style={style}>
         <AutoSizer
+          defaultHeight={defaultHeight}
+          defaultWidth={defaultWidth}
           disableHeight={disableHeight}
           disableWidth={disableWidth}
           onResize={onResize}>
@@ -218,4 +223,19 @@ describe('AutoSizer', () => {
       done();
     });
   });
+
+  describe('server-side rendering', () => {
+    it('should render content with default widths and heights initially', () => {
+      const rendered = ReactDOMServer.renderToString(
+        getMarkup({
+          defaultHeight: 100,
+          defaultWidth: 200,
+          height: 400,
+          width: 800,
+        }),
+      );
+      expect(rendered).toContain('height:100');
+      expect(rendered).toContain('width:200');
+    });
+  });
 });

source/AutoSizer/AutoSizer.js

@@ -15,6 +15,12 @@ type Props = {
   /** Function responsible for rendering children.*/
   children: (warams: Size) => React.Element<*>,
 
+  /** Default height to use for initial render; useful for SSR */
+  defaultHeight?: number,
+
+  /** Default width to use for initial render; useful for SSR */
+  defaultWidth?: number,
+
   /** Disable dynamic :height property */
   disableHeight: boolean,
 
@@ -45,8 +51,8 @@ export default class AutoSizer extends React.PureComponent {
   props: Props;
 
   state = {
-    height: 0,
-    width: 0,
+    height: this.props.defaultHeight || 0,
+    width: this.props.defaultWidth || 0,
   };
 
   _parentNode: ?HTMLElement;
@@ -89,20 +95,24 @@ export default class AutoSizer extends React.PureComponent {
     // Outer div should not force width/height since that may prevent containers from shrinking.
     // Inner component should overflow and use calculated width/height.
     // See issue #68 for more information.
-    const outerStyle: Object = {overflow: 'visible'};
+    const outerStyle: any = {overflow: 'visible'};
+    const childParams: any = {};
 
     if (!disableHeight) {
       outerStyle.height = 0;
+      childParams.height = height;
     }
 
     if (!disableWidth) {
       outerStyle.width = 0;
+      childParams.width = width;
     }
 
     /**
      * TODO: Avoid rendering children before the initial measurements have been collected.
      * At best this would just be wasting cycles.
      * Add this check into version 10 though as it could break too many ref callbacks in version 9.
+     * Note that if default width/height props were provided this would still work with SSR.
     if (
       height !== 0 &&
       width !== 0
@@ -113,7 +123,7 @@ export default class AutoSizer extends React.PureComponent {
 
     return (
       <div ref={this._setRef} style={outerStyle}>
-        {children({height, width})}
+        {children(childParams)}
       </div>
     );
   }