rc-textarea

What is rc-textarea?

The rc-textarea package is a React component for creating and managing text areas with advanced features such as auto-resizing, character counting, and more. It is designed to be highly customizable and easy to integrate into any React application.

What are rc-textarea's main functionalities?

Auto-resizing Textarea

This feature allows the textarea to automatically resize based on the content, with a specified minimum and maximum number of rows.

import React from 'react';
import TextArea from 'rc-textarea';

const AutoResizeExample = () => (
  <TextArea autoSize={{ minRows: 2, maxRows: 6 }} />
);

export default AutoResizeExample;

Character Counting

This feature provides a character count for the textarea, showing the user how many characters they have typed and the maximum allowed.

import React, { useState } from 'react';
import TextArea from 'rc-textarea';

const CharCountExample = () => {
  const [value, setValue] = useState('');
  const maxLength = 100;

  return (
    <div>
      <TextArea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        maxLength={maxLength}
      />
      <div>{value.length}/{maxLength} characters</div>
    </div>
  );
};

export default CharCountExample;

Customizable Styles

This feature allows developers to apply custom styles to the textarea component, making it easy to match the design of their application.

import React from 'react';
import TextArea from 'rc-textarea';

const CustomStyleExample = () => (
  <TextArea style={{ border: '2px solid red', padding: '10px' }} />
);

export default CustomStyleExample;

Other packages similar to rc-textarea

react-textarea-autosize

The react-textarea-autosize package provides a similar auto-resizing functionality for textareas in React. It is lightweight and easy to use, but it may not offer as many built-in features as rc-textarea, such as character counting.

react-textarea

The react-textarea package is another alternative that offers basic textarea functionalities with some customization options. It is simpler compared to rc-textarea and may be suitable for projects that do not require advanced features.

react-autosize-textarea

The react-autosize-textarea package focuses on providing auto-resizing capabilities for textareas in React. It is similar to react-textarea-autosize but may have different performance characteristics and API design.

README

rc-textarea

Pretty Textarea react component used in ant.design.

Live Demo

https://react-component.github.io/textarea/

Install

Usage

import Textarea from 'rc-textarea';
import { render } from 'react-dom';

render(<Textarea />, mountNode);

API

Property	Type	Default	Description
prefixCls	string	rc-textarea
className	string	''	additional class name of textarea
style	React.CSSProperties	-	style properties of textarea
autoSize	boolean | object	-	Height autosize feature, can be set to true|false or an object { minRows: 2, maxRows: 6 }
onPressEnter	function(e)	-	The callback function that is triggered when Enter key is pressed
onResize	function({ width, height })	-	The callback function that is triggered when resize

Development

npm install
npm start

License

rc-textarea is released under the MIT license.