Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kokonut-labs/kokonutui/llms.txt

Use this file to discover all available pages before exploring further.

​

A React hook that automatically adjusts textarea height based on content, with configurable min and max height constraints.

​
Installation

This hook can be installed via the CLI: 
bunx --bun shadcn@latest add @kokonutui/use-auto-resize-textarea
Or manually copy the hook from /hooks/use-auto-resize-textarea.ts into your project.

​
Usage

import { useAutoResizeTextarea } from "@/hooks/use-auto-resize-textarea";

function MyComponent() {
  const { textareaRef, adjustHeight } = useAutoResizeTextarea({
    minHeight: 100,
    maxHeight: 400,
  });

  return (
    <textarea
      ref={textareaRef}
      onChange={() => adjustHeight()}
      className="w-full resize-none"
    />
  );
}

​
API Reference

​
Parameters

The hook accepts a configuration object with the following properties:
ParameterTypeDefaultDescription
minHeightnumberrequiredMinimum height of the textarea in pixels
maxHeightnumberundefinedMaximum height of the textarea in pixels. If not provided, textarea can grow infinitely

​
Return Value

Returns an object with:
PropertyTypeDescription
textareaRefRefObject<HTMLTextAreaElement>Ref to attach to your textarea element
adjustHeight(reset?: boolean) => voidFunction to manually trigger height adjustment. Pass reset: true to reset to minHeight

​
Features

  • Auto-resize on content change - Call adjustHeight() in your onChange handler
  • Window resize handling - Automatically adjusts on window resize
  • Min/max constraints - Prevents textarea from becoming too small or large
  • Manual reset - Reset to minimum height with adjustHeight(true)

​
Use Cases

  • Comment boxes that grow with user input
  • Message input fields in chat applications
  • Dynamic form textareas
  • Auto-expanding note-taking interfaces

Build docs developers (and LLMs) love

Get started for freeTalk to us