useTextareaAutosize

Hook that automatically adjusts textarea height based on content

elements

medium

test coverage

Last changed: 12 minutes ago

Installation

Library

CLI

Manual

import { useTextareaAutosize } from '@siberiacancode/reactuse';

Usage

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

Demo

source

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
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> }

Type declaration

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 */
  setValue: (value: string) => void;
}

export interface UseTextareaAutosize {
  (target: HookTarget, options?: UseTextareaAutosizeOptions): 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>;
  };
}

Source

Source • Demo

Contributors

D

debabin