feat: resize text area 구현 (#85)

#62 Co-authored-by: yeonddori <[email protected]>
BDD-CLUB · Feb 21, 2024 · 04ae4b5 · 04ae4b5
1 parent 1f89631
commit 04ae4b5
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.0.1"
+    "react-icons": "^5.0.1",
+    "react-textarea-autosize": "^8.5.3"
   },
   "devDependencies": {
     "@swc-jotai/react-refresh": "^0.1.0",

diff --git a/src/components/AutoResizeTextarea/index.tsx b/src/components/AutoResizeTextarea/index.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { Textarea, forwardRef } from '@chakra-ui/react';
+import React from 'react';
+import ResizeTextarea from 'react-textarea-autosize';
+
+import { AutoResizeTextareaProps } from './type';
+
+const AutoResizeTextarea = forwardRef(({ ref, ...props }: AutoResizeTextareaProps) => (
+  <Textarea ref={ref} as={ResizeTextarea} overflow="hidden" w="100%" minH="unset" resize="none" {...props} />
+));
+
+export default AutoResizeTextarea;
diff --git a/src/components/AutoResizeTextarea/type.ts b/src/components/AutoResizeTextarea/type.ts
@@ -0,0 +1,3 @@
+export interface AutoResizeTextareaProps {
+  ref?: React.Ref<HTMLTextAreaElement>;
+}