@commercetools-uikit/rich-text-input

A controlled rich text input component for rich text with validation states.

Usage no npm install needed!

<script type="module">
  import commercetoolsUikitRichTextInput from 'https://cdn.skypack.dev/@commercetools-uikit/rich-text-input';
</script>

README

RichTextInput

Description

A controlled rich text input component for rich text with validation states.

Usage

import RichTextInput from '@commercetools-uikit/rich-text-input';

const html = '<p>hello world</p>';

const Input = props => {
  const [value, setValue] = React.useState(html);
  return (
    <RichTextInput
      value={value}
      onChange={event => { setValue(event.target.value)}
    />;
  )
}

Properties

Props Type Required Values Default Description
name string - - - Used as HTML name property
autoComplete string - - - Used as HTML autoComplete property
id string - - - Specifies the id of an element
value string - - Value of the input
onChange func - - Called with an event containing the new value. Required, unless input is read-only. Parent should pass it back as value
onBlur func - - - Called when field is blurred
onFocus func - - - Called when field is focused
isAutofocussed bool - - - Focuses the input field on initial render
defaultExpandMultilineText bool - - false Expands rich text input initially
placeholder string - - - Placeholder text for the input
isDisabled bool - - false Indicates that the field cannot be used (e.g not authorised, or changes not saved)
isReadOnly bool - - false Indicates that the field is displaying read-only content
hasError bool - - false Indicates the input field has an error
hasWarning bool - - false Indicates the input field has a warning
horizontalConstraint object m, l, xl, scale scale Horizontal size limit of the input fields.
showExpandIcon bool - - false Shows an expand icon in the toolbar
onClickExpand func - - - Called when the expand button is clicked

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.