@commercetools-uikit/rich-text-input
v19.15.0
Published
A controlled rich text input component for rich text with validation states.
Downloads
14,436
Readme
RichTextInput
Description
A controlled rich text input component for rich text with validation states.
Installation
yarn add @commercetools-uikit/rich-text-input
npm --save install @commercetools-uikit/rich-text-input
Additionally install the peer dependencies (if not present)
yarn add react react-dom react-intl
npm --save install react react-dom react-intl
Usage
import React from 'react';
import RichTextInput from '@commercetools-uikit/rich-text-input';
const html = '<p>hello world</p>';
const Example = (props) => {
const [value, setValue] = React.useState(html);
const handleChange = React.useCallback((event) => {
setValue(event.target.value);
}, []);
const ref = React.useRef(null);
const handleReset = React.useCallback(() => {
ref.current?.resetValue('<p>after reset</p>');
}, []);
return (
<>
<button onClick={handleReset}>Reset</button>
<RichTextInput value={value} onChange={handleChange} ref={ref} />
</>
);
};
export default Example;
Properties
| Props | Type | Required | Default | Description |
| ---------------------------- | ----------------------------------------------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------- |
| isAutofocussed
| boolean
| | | Focus the control when it is mounted |
| defaultExpandMultilineText
| boolean
| | | Expands multiline text input initially |
| hasError
| boolean
| | | Indicates the input field has an error |
| hasWarning
| boolean
| | | Indicates the input field has warning |
| id
| string
| | | Used as the HTML id
attribute. |
| name
| string
| | | Used as the HTML name
attribute. |
| placeholder
| string
| ✅ | | Placeholder value to show in the input field |
| isDisabled
| boolean
| | | Disables the rich text input |
| isReadOnly
| boolean
| | | Indicates that the rich text input is displaying read-only content |
| horizontalConstraint
| union
Possible values:, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'
| | | Horizontal size limit of the input fields |
| onChange
| Function
See signature. | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
| onFocus
| FocusEventHandler
| | | Called when input is focused |
| onBlur
| FocusEventHandler
| | | Called when input is blurred |
| value
| string
| | | Value of the input component. |
| showExpandIcon
| boolean
| ✅ | | Indicates whether the expand icon should be visible |
| onClickExpand
| Function
See signature. | | | Called when the expand
button is clicked |
Signatures
Signature onChange
(event: TChangeEvent) => void
Signature onClickExpand
() => boolean;
Static methods
RichTextInput.isEmpty
Returns true
when the value is considered empty, which is when the value is empty.
RichTextInput.isEmpty(''); // -> true
RichTextInput.isEmpty('<p></p>'); // -> true
RichTextInput.isEmpty('tree'); // -> false
isTouched(touched)
Expects to be called with an array or boolean.
Returns true
when truthy.