@rc-component/input ⌨️

Install

Usage

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

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

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

render(<Input.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 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 |

TextArea

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

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

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

| 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);
}, []);

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