Auto resize

Automatic textarea height adjustment based on content in DyeLight

DyeLight includes built-in automatic resizing that adjusts the textarea height dynamically as content changes. This creates a more natural editing experience by eliminating scrollbars for shorter content.

How it works

When enableAutoResize is enabled (the default), the textarea automatically grows and shrinks based on its content. The component uses the scrollHeight property to calculate the required height (see useAutoResize.ts:26-27).

import { DyeLight } from 'dyelight';

function AutoResizeExample() {
  const [text, setText] = useState('Type here...');

  return (
    <DyeLight
      value={text}
      onChange={setText}
      enableAutoResize={true}  // Default
      rows={4}
    />
  );
}

Enabling and disabling

Auto-resize is enabled by default. You can disable it to allow manual vertical resizing:

<DyeLight
  value={text}
  onChange={setText}
  enableAutoResize={false}
/>

When enableAutoResize is false, the textarea’s resize CSS property is set to 'vertical', allowing users to manually resize. When true, it’s set to 'none' (see DyeLight.tsx:423).

The resize mechanism

The auto-resize functionality is managed by the useAutoResize hook, which:

1. Monitors content changes
2. Calculates the new height using scrollHeight
3. Applies the height to the textarea
4. Synchronizes the highlight overlay

Here’s the core logic from useAutoResize.ts:55-80:

const handleAutoResize = useCallback(
  (element: HTMLTextAreaElement) => {
    if (!enableAutoResize) {
      return;
    }

    const beforeHeight = element.scrollHeight;
    autoResize(element);  // Applies height from scrollHeight
    const afterHeight = element.scrollHeight;

    setTextareaHeight(element.scrollHeight);
  },
  [enableAutoResize]
);

Resize triggers

The textarea automatically resizes in response to:

• Text changes: When the user types or deletes content
• Paste operations: When content is pasted in
• Programmatic updates: When setValue() is called via ref
• Layout changes: When styles, className, or rows props change
• ResizeObserver events: When the textarea is resized by external factors

Initial rows

The rows prop sets the initial visible height when the textarea is empty or contains minimal content:

<DyeLight
  value={text}
  onChange={setText}
  rows={8}  // Starts with 8 rows of height
  enableAutoResize={true}
/>

As content grows beyond the initial rows, the textarea expands automatically.

Use cases

Comment boxes

Auto-resize is perfect for comment or message inputs that should grow with content:

function CommentBox() {
  const [comment, setComment] = useState('');

  return (
    <div className="border rounded-lg p-4">
      <DyeLight
        value={comment}
        onChange={setComment}
        placeholder="Add a comment..."
        className="w-full border-0 outline-none"
        rows={2}
        enableAutoResize={true}
      />
    </div>
  );
}

Code editors with limited space

For inline code editors where you want to see all content without scrolling:

function InlineCodeEditor() {
  const [code, setCode] = useState('');

  return (
    <DyeLight
      value={code}
      onChange={setCode}
      className="font-mono text-sm p-2 border rounded"
      rows={3}
      enableAutoResize={true}
      highlights={syntaxHighlights}
    />
  );
}

Fixed-height editors

When you need a fixed-height editor with scrolling (e.g., for large documents):

function FixedHeightEditor() {
  const [document, setDocument] = useState('');

  return (
    <DyeLight
      value={document}
      onChange={setDocument}
      className="w-full h-96 p-4 border rounded"
      enableAutoResize={false}  // Disable auto-resize
      rows={20}
    />
  );
}

For fixed-height layouts, set enableAutoResize={false} and use CSS height (className or style) to control the size.

Performance considerations

The auto-resize mechanism is optimized to avoid layout thrashing:

• ResizeObserver batching: Uses ResizeObserver to detect size changes, which is batched by the browser (see DyeLight.tsx:400-410)
• Debouncing: Layout updates are debounced using requestAnimationFrame to prevent rapid recalculations
• Memoization: Height calculations are cached and only recomputed when necessary

Telemetry and debugging

When debug mode is enabled, auto-resize events are tracked with telemetry data:

const dyeLightRef = useRef<DyeLightRef>(null);

<DyeLight
  ref={dyeLightRef}
  value={text}
  onChange={setText}
  debug={true}
  enableAutoResize={true}
/>

The telemetry includes (from useAutoResize.ts:67-75):

• beforeHeight: Height before resize
• afterHeight: Height after resize
• changed: Whether the height actually changed
• textLength: Current text length

Excessive resize events (more than text changes) may indicate an infinite ResizeObserver loop. Check the debug report for this pattern.

Styling with auto-resize

When using auto-resize with custom styles:

<DyeLight
  value={text}
  onChange={setText}
  enableAutoResize={true}
  // The component manages height, so avoid setting explicit height in style
  className="w-full p-3 border rounded"
  containerClassName="max-h-96 overflow-auto"  // Limit max height if needed
/>

If you need to limit the maximum height, apply max-height to the containerClassName rather than the textarea itself. This allows the textarea to grow within a scrollable container.