@rc-component/input

@rc-component/input ⌨️

Install

Usage

import Input from '@rc-component/input';
import { render } from 'react-dom';

render(<Input placeholder="input" allowClear />, mountNode);

import { TextArea } from '@rc-component/input';
import { render } from 'react-dom';

render(<TextArea autoSize showCount />, mountNode);

API

Property	Type	Default	Description
prefixCls	string	rc-input
className	string	''	additional class name of input
style	React.CSSProperties		style properties of input
affixWrapperClassName	string	-	className with '@rc-component/input-affix-wrapper'
groupClassName	string	-	className with '@rc-component/input-group-wrapper'
wrapperClassName	string	-	className with '@rc-component/input-wrapper'
addonAfter	ReactNode	-	The label text displayed after (on the right side of) the input field
addonBefore	ReactNode	-	The label text displayed before (on the left side of) the input field
allowClear	boolean | { clearIcon: ReactNode }	false	If allow to remove input content with clear icon
bordered	boolean	true	Whether has border style
defaultValue	string	-	The initial input content
disabled	boolean	false	Whether the input is disabled
id	string	-	The ID for input
maxLength	number	-	The max length
showCount	boolean | { formatter: ({ value: string, count: number, maxLength?: number }) => ReactNode }	false	Whether show text count
prefix	ReactNode	-	The prefix icon for the Input
suffix	ReactNode	-	The suffix icon for the Input
type	string	text	The type of input, see: MDN (use the named TextArea export instead of type="textarea")
value	string	-	The input content value
onChange	function(e)	-	Callback when user input
onPressEnter	function(e)	-	The callback function that is triggered when Enter key is pressed

TextArea

rc-textarea has been migrated into @rc-component/input. Use the named TextArea export for all textarea-related features.

import { TextArea } from '@rc-component/input';

<TextArea showCount maxLength={100} />;
<TextArea allowClear autoSize />;

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 }
allowClear	boolean | { clearIcon }	false	If allow to remove textarea content with clear icon
showCount	boolean | { formatter }	false	Whether show text count
count	CountConfig	-	Custom count strategy / max / exceed formatter
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

inputRef

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus(); // the input will get focus
  inputRef.current.blur(); // the input will lose focus
  console.log(inputRef.current.input); // The origin input element
}, []);
// ....
<Input ref={inputRef} />;

Property	Type	Description
focus	(options?: InputFocusOptions) => void	The input get focus when called
blur	() => void	The input loses focus when called
input	HTMLInputElement | null	The origin input element

textareaRef

const textareaRef = useRef(null);

useEffect(() => {
  textareaRef.current.focus();
  textareaRef.current.blur();
  console.log(textareaRef.current.resizableTextArea);
}, []);

<TextArea ref={textareaRef} />;

Property	Type	Description
focus	() => void	The textarea get focus when called
blur	() => void	The textarea loses focus when called
resizableTextArea	ResizableTextAreaRef	Wrapped resizable textarea instance
nativeElement	HTMLElement | null	The outer holder element or textarea DOM

Development

npm install
npm start

License

@rc-component/input is released under the MIT license.

Similar packages

Other packages similar to @rc-component/input

react-number-format

Provides React input components for formatted numeric values, such as currency and percentages. It is more specialized in number formatting, while @rc-component/input is a general-purpose input building block.

react-input-mask

Adds input masks for formats such as phone numbers and dates. It focuses on constraining input patterns rather than providing a broad set of input adornments and variants.

@mui/material

A full React component library whose TextField and Input components offer input controls with labels, validation states, and theming. It is a much broader, styled UI system; @rc-component/input is a more focused, lower-level input package.

react-textarea-autosize

Provides a textarea that grows automatically with its content. It focuses on autosizing multiline input, whereas @rc-component/input covers several input types and supporting controls.