an independent Bluesky client using Constellation, PDS Queries, and other services reddwarf.app
frontend spa bluesky reddwarf microcosm client app
99
fork

Configure Feed

Select the types of activity you want to include in your feed.

AutoGrowTextarea

rimar1337 ba24c311 0aedb454

+24 -3
+24 -3
src/components/Composer.tsx
··· 1 1 import { RichText } from "@atproto/api"; 2 2 import { useAtom } from "jotai"; 3 - import { useEffect, useState } from "react"; 3 + import { useEffect, useRef, useState } from "react"; 4 4 5 5 import { useAuth } from "~/providers/UnifiedAuthProvider"; 6 6 import { composerAtom } from "~/utils/atoms"; ··· 186 186 <div className="flex w-full gap-1 flex-col"> 187 187 <ProfileThing agent={agent} large/> 188 188 <div className="flex pl-[50px]"> 189 - <textarea 190 - className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white" 189 + <AutoGrowTextarea 190 + className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2" 191 191 rows={5} 192 192 placeholder={getPlaceholder()} 193 193 value={postText} ··· 221 221 )} 222 222 </div> 223 223 </div> 224 + ); 225 + } 226 + 227 + function AutoGrowTextarea({ value, className, onChange, ...props }: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>) { 228 + const ref = useRef<HTMLTextAreaElement>(null); 229 + 230 + useEffect(() => { 231 + const el = ref.current; 232 + if (!el) return; 233 + el.style.height = "auto"; 234 + el.style.height = el.scrollHeight + "px"; 235 + }, [value]); 236 + 237 + return ( 238 + <textarea 239 + ref={ref} 240 + className={className} 241 + value={value} 242 + onChange={onChange} 243 + {...props} 244 + /> 224 245 ); 225 246 }