Do not always force async initialization.

Adds a new `async` prop to force async initialization, as proposed in buildo#95.

Async initialization will make your page "jump" when the component appears, as it will first be rendered with the normal size, then resized to content. But async init is only needed when using StyledComponents (see buildo#71) or when `maxRows` is set, so let the user decide to enable it.

Fixes buildo#95

README.md

@@ -34,6 +34,7 @@ In addition to them, `TextareaAutosize` comes with some optional custom `props`
 | **onResize** | <code>Function</code> |  | *optional*. Called whenever the textarea resizes |
 | **rows** | <code>Number</code> |  | *optional*. Minimum number of visible rows |
 | **maxRows** | <code>Number</code> |  | *optional*. Maximum number of visible rows |
+| **async** | <code>Boolean</code> | <code>false</code> | *optional*. Initialize `autosize` asynchronously. Enable it if you are using StyledComponents. This is forced to true when `maxRows` is set. Async initialization will make your page "jump" when the component appears, as it will first be rendered with the normal size, then resized to content.
 
 
 #### `onResize`

src/TextareaAutosize.tsx

@@ -14,10 +14,16 @@ export type TextareaAutosizeRequiredProps = React.HTMLProps<HTMLTextAreaElement>
   maxRows?: number,
   /** Called with the ref to the DOM node */
   innerRef?: (textarea: HTMLTextAreaElement) => void
+  /** Initialize `autosize` asynchronously.
+   * Enable it if you are using StyledComponents
+   * This is forced to true when `maxRows` is set.
+   */
+  async?: boolean
 }
 
 export type TextareaAutosizeDefaultProps = {
   rows: number
+  async: boolean
 }
 
 export namespace TextareaAutosize {
@@ -41,14 +47,16 @@ const RESIZED: EventType = 'autosize:resized';
 export default class TextareaAutosize extends React.Component<TextareaAutosize.Props, State> {
 
   static defaultProps: TextareaAutosizeDefaultProps = {
-    rows: 1
+    rows: 1,
+    async: false
   };
 
   static propTypes: { [key in keyof TextareaAutosize.Props]: PropTypes.Requireable<any> } = {
     rows: PropTypes.number,
     maxRows: PropTypes.number,
     onResize: PropTypes.func,
-    innerRef: PropTypes.func
+    innerRef: PropTypes.func,
+    async: PropTypes.bool
   }
 
   state = {
@@ -59,18 +67,22 @@ export default class TextareaAutosize extends React.Component<TextareaAutosize.P
   currentValue: TextareaAutosize.Props['value']
 
   componentDidMount() {
-    const { onResize, maxRows } = this.props;
+    const { onResize, maxRows, async } = this.props;
 
     if (typeof maxRows === 'number') {
       this.updateLineHeight();
     }
 
-    /*
-      the defer is needed to:
-        - force "autosize" to activate the scrollbar when this.props.maxRows is passed
-        - support StyledComponents (see #71)
-    */
-    setTimeout(() => autosize(this.textarea));
+    if(typeof maxRows === "number" || async) {
+      /*
+        the defer is needed to:
+          - force "autosize" to activate the scrollbar when this.props.maxRows is passed
+          - support StyledComponents (see #71)
+      */
+      setTimeout(() => autosize(this.textarea));
+    } else {
+      autosize(this.textarea)
+    }
 
     if (onResize) {
       this.textarea.addEventListener(RESIZED, onResize as any);

test/tests/__snapshots__/TextareaAutosize.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`TextareaAutosize renders correctly 1`] = `
 <textarea
+  async={false}
   defaultValue="Initial Value"
   onChange={[Function]}
   rows={1}