useTextareaAutosize

Hook that automatically adjusts textarea height based on content

elementsmediumtest coverage

Feedback

Tell us what's working, what's not, or what you'd love to see.

import type { SubmitEvent } from 'react';

import { useField, useTextareaAutosize } from '@siberiacancode/reactuse';
import { UserIcon } from 'lucide-react';

const Demo = () => {
  const nameField = useField('');
  const message = useTextareaAutosize();

  const onSubmit = (event: SubmitEvent<HTMLFormElement>) => {
    event.preventDefault();
  };

  return (
    <section className='flex w-full max-w-md flex-col p-4'>
      <div className='flex w-full flex-col gap-4'>
        <div className='flex flex-col gap-0.5'>
          <h3 className='text-foreground text-sm font-semibold'>Feedback</h3>
          <p className='text-muted-foreground text-xs'>
            Tell us what's working, what's not, or what you'd love to see.
          </p>
        </div>

        <form className='flex flex-col gap-3' onSubmit={onSubmit}>
          <div className='flex flex-col gap-1.5'>
            <label className='text-foreground text-xs font-medium' htmlFor='name'>
              Name
            </label>
            <div className='relative'>
              <UserIcon className='text-muted-foreground pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2' />
              <input
                className='pl-9!'
                id='name'
                placeholder='Your name'
                {...nameField.register()}
              />
            </div>
          </div>

          <div className='flex flex-col gap-1.5'>
            <label className='text-foreground text-xs font-medium' htmlFor='message'>
              Feedback
            </label>
            <textarea
              ref={message.ref}
              className='no-scrollbar resize-none'
              id='message'
              placeholder='Share your thoughts — this box grows as you type…'
              style={{ minHeight: '72px', maxHeight: '200px' }}
            />
          </div>

          <div className='flex items-center justify-end'>
            <button data-size='sm' disabled={!message.value.length} type='submit'>
              Send
            </button>
          </div>
        </form>
      </div>
    </section>
  );
};

export default Demo;

Installation

pnpm add @siberiacancode/reactuse

Usage

const { value, setValue, clear } = useTextareaAutosize(ref);
// or
const { value, setValue, clear } = useTextareaAutosize(ref, 'initial');
// or
const { ref, value, setValue, clear } = useTextareaAutosize('initial');
// or
const { ref, value, setValue, clear } = useTextareaAutosize();

Type Declarations

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseTextareaAutosizeOptions {
  /** The initial value for the textarea */
  initialValue?: string;
  /** Callback function called when the textarea size changes */
  onResize?: () => void;
}

export interface UseTextareaAutosizeReturn {
  /** The current value of the textarea */
  value: string;
  /** Function to clear the textarea value */
  clear: () => void;
  /** Function to set the textarea value */
  set: (value: string) => void;
}

export interface UseTextareaAutosize {
  (target: HookTarget, options?: UseTextareaAutosizeOptions): UseTextareaAutosizeReturn;

  (target: HookTarget, initialValue: string): UseTextareaAutosizeReturn;

  <Target extends HTMLTextAreaElement = HTMLTextAreaElement>(
    initialValue: string,
    target?: never
  ): UseTextareaAutosizeReturn & {
    ref: StateRef<Target>;
  };

  <Target extends HTMLTextAreaElement = HTMLTextAreaElement>(
    options?: UseTextareaAutosizeOptions,
    target?: never
  ): UseTextareaAutosizeReturn & {
    ref: StateRef<Target>;
  };
}

API

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target textarea element
options.initialValue	string	-	The initial value for the textarea
options.onResize	Function	-	Callback function called when the textarea size changes

Returns

UseTextareaAutosizeReturn

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target textarea element
initialValue	string	-	The initial value for the textarea

Returns

UseTextareaAutosizeReturn

Parameters

Name	Type	Default	Note
initialValue	string	-	The initial value for the textarea

Returns

UseTextareaAutosizeReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
options.initialValue	string	-	The initial value for the textarea
options.onResize	Function	-	Callback function called when the textarea size changes

Returns

UseTextareaAutosizeReturn & { ref: StateRef<Target> }

Contributors

ddebabin

Last updated on

useSize useTextDirection