Autosize Textarea Customize

1"use client";
2 
3import { zodResolver } from "@hookform/resolvers/zod";
4import { useForm } from "react-hook-form";
5import * as z from "zod";
6import * as React from "react";
7import {
8  Form,
9  FormControl,
10  FormField,
11  FormItem,
12  FormLabel,
13  FormMessage,
14} from "@/components/ui/form";
15import { Textarea } from "@/components/ui/textarea";
16import { toast } from "@/components/ui/use-toast";
17import { useAutosizeTextArea } from "@/components/ui/autosize-textarea";
18import { LoadingButton } from "@/components/ui/loading-button";
19 
20const FormSchema = z.object({
21  bio: z
22    .string()
23    .min(10, {
24      message: "Bio must be at least 10 characters.",
25    })
26    .max(160, {
27      message: "Bio must not be longer than 30 characters.",
28    }),
29});
30 
31const AutosizeTextareaCustomize = () => {
32  const form = useForm<z.infer<typeof FormSchema>>({
33    resolver: zodResolver(FormSchema),
34  });
35 
36  const [loading, setLoading] = React.useState(false);
37 
38  const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
39  const [triggerAutoSize, setTriggerAutoSize] = React.useState("");
40  useAutosizeTextArea({
41    textAreaRef: textAreaRef?.current,
42    triggerAutoSize: triggerAutoSize,
43    minHeight: 52,
44    maxHeight: 200,
45  });
46 
47  /** You can use `form.watch` to trigger auto sizing. */
48  const bio = form.watch("bio");
49  React.useEffect(() => {
50    if (textAreaRef.current) {
51      setTriggerAutoSize(bio);
52    }
53  }, [bio]);
54 
55  function onSubmit(data: z.infer<typeof FormSchema>) {
56    setLoading(true);
57 
58    setTimeout(() => {
59      setLoading(false);
60      toast({
61        title: "Your submitted data",
62        description: (
63          <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
64            <code className="text-white">{JSON.stringify(data, null, 2)}</code>
65          </pre>
66        ),
67      });
68    }, 500);
69  }
70 
71  return (
72    <Form {...form}>
73      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
74        <FormField
75          control={form.control}
76          name="bio"
77          render={({ field }) => (
78            <FormItem>
79              <FormLabel>Bio</FormLabel>
80              <FormControl>
81                <Textarea
82                  placeholder="Tell us a little bit about yourself"
83                  {...field}
84                  ref={textAreaRef}
85                />
86              </FormControl>
87              <FormMessage />
88            </FormItem>
89          )}
90        />
91        <LoadingButton loading={loading} type="submit">
92// … truncated