@types/react-textarea-autosize

What is @types/react-textarea-autosize?

@types/react-textarea-autosize provides TypeScript definitions for the react-textarea-autosize package, which is a React component that automatically adjusts the height of a textarea as the user types.

What are @types/react-textarea-autosize's main functionalities?

Auto-resizing Textarea

This feature allows the textarea to automatically adjust its height based on the content, with a minimum of 3 rows and a maximum of 6 rows.

import TextareaAutosize from 'react-textarea-autosize';

function App() {
  return (
    <TextareaAutosize minRows={3} maxRows={6} />
  );
}

Custom Styling

This feature demonstrates how to apply custom styles to the auto-resizing textarea.

import TextareaAutosize from 'react-textarea-autosize';

function App() {
  return (
    <TextareaAutosize style={{ width: '100%', padding: '10px' }} />
  );
}

Handling Events

This feature shows how to handle events, such as the onChange event, with the auto-resizing textarea.

import TextareaAutosize from 'react-textarea-autosize';

function App() {
  const handleChange = (event) => {
    console.log(event.target.value);
  };

  return (
    <TextareaAutosize onChange={handleChange} />
  );
}

Other packages similar to @types/react-textarea-autosize

react-autosize-textarea

react-autosize-textarea is another React component for auto-resizing textareas. It offers similar functionality to react-textarea-autosize but with a different API and implementation details.

react-textarea-autosize

react-textarea-autosize is the core package for which @types/react-textarea-autosize provides TypeScript definitions. It is widely used and well-maintained, offering robust auto-resizing capabilities for textareas in React applications.

react-expanding-textarea

react-expanding-textarea is a lightweight alternative for auto-resizing textareas in React. It provides basic auto-resizing functionality with a simpler API compared to react-textarea-autosize.

README

Installation

npm install --save @types/react-textarea-autosize

Summary

This package contains type definitions for react-textarea-autosize (https://github.com/andreypopp/react-textarea-autosize).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-textarea-autosize.

index.d.ts

// Type definitions for react-textarea-autosize 4.3.0
// Project: https://github.com/andreypopp/react-textarea-autosize
// Definitions by: Alexey Svetliakov <https://github.com/asvetliakov>,
//                 Jerry Zou <https://github.com/zry656565>
//                 Rahul Sagore <https://github.com/Rahul-Sagore>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8

declare module "react-textarea-autosize" {
    import * as React from "react";

    /**
     * <TextareaAutosize/> properties
     */
    export interface TextareaAutosizeProps extends React.HTMLProps<HTMLTextAreaElement> {
        /**
         * Current textarea value
         */
        value?: string | undefined;
        /**
         * Callback on value change
         * @param event
         */
        onChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
        /**
         * Callback on height change
         * @param height
         */
        onHeightChange?: ((height: number) => void) | undefined;
        /**
         * Try to cache DOM measurements performed by component so that we don't
         * touch DOM when it's not needed.
         *
         * This optimization doesn't work if we dynamically style `<textarea />`
         * component.
         * @default false
         */
        useCacheForDOMMeasurements?: boolean | undefined;
        /**
         * Minimal number of rows to show.
         */
        rows?: number | undefined;
        /**
         * Alias for `rows`.
         */
        minRows?: number | undefined;
        /**
         * Maximum number of rows to show.
         */
        maxRows?: number | undefined;
        /**
         * Allows an owner to retrieve the DOM node.
         */
        inputRef?: ((node: HTMLTextAreaElement) => void) | React.RefObject<HTMLTextAreaElement> | undefined;
    }

    /**
     * <TextareaAutosize/>
     */
    export default class TextareaAutosize extends React.Component<TextareaAutosizeProps> { }

}

Additional Details

• Last updated: Wed, 07 Jul 2021 18:31:47 GMT
• Dependencies: @types/react
• Global values: none

Credits

These definitions were written by Alexey Svetliakov, Jerry Zou, and Rahul Sagore.