Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(textarea): auto resizable #1681

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
+161 −102
Open

feat(textarea): auto resizable #1681

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
926b01b
feat: resizable textarea
rainyEra Oct 5, 2023
fe45978
chore: new-york textarea update
rainyEra Oct 5, 2023
7c8fa95
refactor: new yorker text-area to initial
rainyEra Oct 5, 2023
0412969
Merge branch 'main' into main
shadcn Oct 15, 2023
7611b81
Merge branch 'main' into main
shadcn Oct 15, 2023
221fb82
fix(textarea): formatting
rainyEra Oct 16, 2023
e6d80a3
fix(textarea): textarea: use client useRef
rainyEra Oct 16, 2023
065e3a2
(textarea)fix: use client w useRef
rainyEra Oct 16, 2023
ce1f145
(textarea)fix: use client w useRef
rainyEra Oct 16, 2023
e97b9ed
Merge branch 'main' of https://github.com/rainyEra/ui
rainyEra Oct 16, 2023
717aca7
refactor: resize hook, -1 dependency
rainyEra Nov 7, 2023
e99e689
feat(ui): text-area autoResize prop
rainyEra Mar 28, 2024
ce98b49
refactor(ui): textArea format
rainyEra Mar 28, 2024
6f90791
Merge branch 'shadcn-ui:main' into main
rainyEra Mar 28, 2024
c7f26c5
docs(ui): textarea autoResize prop
rainyEra Mar 28, 2024
1485410
build(ui): textarea-with-autoresize.tsx
rainyEra Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 24 additions & 4 deletions apps/www/registry/default/ui/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,44 @@
'use client'
import * as React from "react"
import { useEffect, useRef } from "react"
import { mergeRefs } from "react-merge-refs"

import { cn } from "@/lib/utils"

export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
const texteAreaRef = useRef<HTMLTextAreaElement>(null)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could use React.useImperativeHandle to merge the refs so you don't need to pull in an extra dependency.

    const texteAreaRef = useRef<HTMLTextAreaElement>(null)
    React.useImperativeHandle(ref, () => texteAreaRef.current!);
<textarea
        className={cn(
          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        ref={texteAreaRef}
        {...props}
      />

https://react.dev/reference/react/useImperativeHandle

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it, I just prefer other way due to readability. -1 dependency, this is also good.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how can i make a dynamic textarea with react-hook-form, it handles ref by itself . how can i make it use my ref

useEffect(() => {
const ref = texteAreaRef?.current

const updateTextareaHeight = () => {
if (ref) {
ref.style.height = "auto"
ref.style.height = ref?.scrollHeight + "px"
}
}

updateTextareaHeight()
ref?.addEventListener("input", updateTextareaHeight)

return () => ref?.removeEventListener("input", updateTextareaHeight)
}, [])

return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
ref={mergeRefs([texteAreaRef, ref])}
{...props}
/>
)
}
)
Textarea.displayName = "Textarea"

export { Textarea }
Textarea.displayName = "Textarea"
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
"postcss": "^8.4.24",
"prettier": "^2.8.8",
"pretty-quick": "^3.1.3",
"react-merge-refs": "^2.1.1",
"tailwindcss": "^3.3.2",
"tailwindcss-animate": "^1.0.5",
"ts-node": "^10.9.1",
Expand Down
7 changes: 7 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.