rc-input

react-component
esm Styles
rc-input JS library on GitHub rc-input JS library on npm Download rc-input JS library

React input component

Version 1.8.0 License MIT
rc-input has no homepage
rc-input JS library on GitHub
rc-input JS library on npm
Download rc-input JS library
Keywords
reactreact-componentreact-inputinputantdant-design
INSTALL
Type:
Version:
<script type="module"> import rcInput from 'https://cdn.jsdelivr.net/npm/rc-input@1.8.0/+esm' </script>
Learn more
Readme Files Statistics Browse CDN

rc-input ⌨️

NPM version npm download build status Codecov bundle size dumi

Install

rc-input

Usage

import Input from 'rc-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-input-affix-wrapper'
groupClassName string - className with 'rc-input-group-wrapper'
wrapperClassName string - className with 'rc-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-input is released under the MIT license.