rc-input ⌨️

Install

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.