@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);

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 Input.TextArea 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

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

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.