auto grow textareas

components/header.js

@@ -92,7 +92,7 @@ export default function Header () {
       const strike = useLightning()
       useEffect(() => {
         setTimeout(strike, randInRange(3000, 10000))
-      }, [])
+      }, [router.asPath])
       return path !== '/login' && <Button id='login' onClick={signIn}>login</Button>
     }
   }

components/reply.js

@@ -5,6 +5,7 @@ import styles from './reply.module.css'
 import { COMMENTS } from '../fragments/comments'
 import { useMe } from './me'
 import ActionTooltip from './action-tooltip'
+import TextareaAutosize from 'react-textarea-autosize'
 
 export const CommentSchema = Yup.object({
   text: Yup.string().required('required').trim()
@@ -65,8 +66,8 @@ export default function Reply ({ parentId, onSuccess, autoFocus }) {
       >
         <MarkdownInput
           name='text'
-          as='textarea'
+          as={TextareaAutosize}
-          rows={4}
+          minRows={4}
           autoFocus={autoFocus}
           required
           hint={me?.freeComments ? <span className='text-success'>{me.freeComments} free comments left</span> : null}

package-lock.json

@@ -31,6 +31,7 @@
         "react-dom": "17.0.1",
         "react-markdown": "^6.0.2",
         "react-syntax-highlighter": "^15.4.3",
+        "react-textarea-autosize": "^8.3.3",
         "remark-gfm": "^1.0.0",
         "remove-markdown": "^0.3.0",
         "sass": "^1.32.8",
@@ -8665,6 +8666,22 @@
         "react": ">= 0.14.0"
       }
     },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz",
+      "integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.2",
+        "use-composed-ref": "^1.0.0",
+        "use-latest": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -10382,6 +10399,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-essentials": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
+      "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w=="
+    },
     "node_modules/ts-invariant": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.8.2.tgz",
@@ -10863,6 +10885,46 @@
         "node": ">=0.4.x"
       }
     },
+    "node_modules/use-composed-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
+      "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
+      "dependencies": {
+        "ts-essentials": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
+      "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-subscription": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
@@ -18028,6 +18090,16 @@
         "refractor": "^3.2.0"
       }
     },
+    "react-textarea-autosize": {
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz",
+      "integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "use-composed-ref": "^1.0.0",
+        "use-latest": "^1.0.0"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -19354,6 +19426,11 @@
       "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
       "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA=="
     },
+    "ts-essentials": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
+      "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w=="
+    },
     "ts-invariant": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.8.2.tgz",
@@ -19712,6 +19789,28 @@
         "prepend-http": "^1.0.1"
       }
     },
+    "use-composed-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
+      "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
+      "requires": {
+        "ts-essentials": "^2.0.3"
+      }
+    },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==",
+      "requires": {}
+    },
+    "use-latest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
+      "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.0.0"
+      }
+    },
     "use-subscription": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",

package.json

@@ -33,6 +33,7 @@
     "react-dom": "17.0.1",
     "react-markdown": "^6.0.2",
     "react-syntax-highlighter": "^15.4.3",
+    "react-textarea-autosize": "^8.3.3",
     "remark-gfm": "^1.0.0",
     "remove-markdown": "^0.3.0",
     "sass": "^1.32.8",

pages/post.js

@@ -8,6 +8,7 @@ import LayoutCenter from '../components/layout-center'
 import { ensureProtocol } from '../lib/url'
 import { useMe } from '../components/me'
 import ActionTooltip from '../components/action-tooltip'
+import TextareaAutosize from 'react-textarea-autosize'
 
 export const DiscussionSchema = Yup.object({
   title: Yup.string().required('required').trim()
@@ -48,8 +49,8 @@ export function DiscussionForm () {
       <MarkdownInput
         label={<>text <small className='text-muted ml-2'>optional</small></>}
         name='text'
-        as='textarea'
+        as={TextareaAutosize}
-        rows={4}
+        minRows={4}
       />
       <ActionTooltip>
         <SubmitButton variant='secondary' className='mt-2'>post</SubmitButton>