Skip to content

react-component/input

Folders and files

NameName
Last commit message
Last commit date
Nov 30, 2024
Mar 24, 2023
Nov 29, 2024
Jul 16, 2024
Nov 30, 2024
Nov 30, 2024
Aug 14, 2024
Feb 18, 2022
Feb 18, 2022
Oct 24, 2022
Aug 25, 2024
Feb 18, 2022
Feb 18, 2022
Feb 18, 2022
Feb 18, 2022
Feb 18, 2022
Aug 14, 2024
Aug 25, 2024
Feb 18, 2022
Apr 20, 2022
Nov 30, 2024
Sep 28, 2023
Feb 18, 2022

Repository files navigation

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.