19.2.0 • Published 4 days ago

@commercetools-uikit/rich-text-input v19.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 days ago

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

PropsTypeRequiredDefaultDescription
isAutofocussedbooleanFocus the control when it is mounted
defaultExpandMultilineTextbooleanExpands multiline text input initially
hasErrorbooleanIndicates the input field has an error
hasWarningbooleanIndicates the input field has warning
idstringUsed as the HTML id attribute.
namestringUsed as the HTML name attribute.
placeholderstringPlaceholder value to show in the input field
isDisabledbooleanDisables the rich text input
isReadOnlybooleanIndicates that the rich text input is displaying read-only content
horizontalConstraintunionPossible values:, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'Horizontal size limit of the input fields
onChangeFunctionSee signature.Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
onFocusFocusEventHandlerCalled when input is focused
onBlurFocusEventHandlerCalled when input is blurred
valuestringValue of the input component.
showExpandIconbooleanIndicates whether the expand icon should be visible
onClickExpandFunctionSee 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.

19.2.0

4 days ago

19.1.0

16 days ago

19.0.0

1 month ago

18.5.0

2 months ago

18.4.0

2 months ago

18.3.0

2 months ago

18.2.0

2 months ago

18.1.0

3 months ago

18.0.0

3 months ago

17.1.0

3 months ago

17.0.1

3 months ago

17.0.0

4 months ago

16.12.1

5 months ago

16.12.0

5 months ago

16.5.0

10 months ago

16.9.0

6 months ago

16.7.3

8 months ago

16.7.2

8 months ago

16.7.1

8 months ago

16.7.0

8 months ago

16.7.5

7 months ago

16.7.4

8 months ago

16.10.0

6 months ago

16.6.1

9 months ago

16.6.0

9 months ago

16.4.1

10 months ago

16.8.0

6 months ago

16.11.0

5 months ago

16.4.0

10 months ago

16.3.0

11 months ago

16.2.1

11 months ago

16.2.0

11 months ago

16.1.1

12 months ago

16.1.0

12 months ago

15.15.0

1 year ago

15.15.1

1 year ago

16.0.0

1 year ago

15.13.2

1 year ago

15.14.3

1 year ago

15.14.1

1 year ago

15.14.2

1 year ago

15.14.0

1 year ago

15.13.1

1 year ago

15.13.0

1 year ago

15.12.0

1 year ago

15.9.0

1 year ago

15.10.0

1 year ago

15.11.2

1 year ago

15.11.0

1 year ago

15.11.1

1 year ago

15.7.0

1 year ago

15.8.0

1 year ago

15.5.0

1 year ago

15.5.1

1 year ago

15.6.0

1 year ago

15.4.0

1 year ago

15.3.0

2 years ago

15.2.4

2 years ago

15.2.1

2 years ago

15.2.2

2 years ago

15.2.3

2 years ago

15.1.1

2 years ago

15.1.2

2 years ago

15.1.0

2 years ago

15.2.0

2 years ago

15.0.2

2 years ago

15.0.0

2 years ago

14.0.2

2 years ago

14.0.3

2 years ago

14.0.6

2 years ago

13.0.4

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

13.0.2

2 years ago

13.0.3

2 years ago

13.0.0

2 years ago

13.0.1

2 years ago

12.2.9

2 years ago

12.2.5

2 years ago

12.2.6

2 years ago

12.2.7

2 years ago

12.2.4

3 years ago

12.2.3

3 years ago

12.2.2

3 years ago

12.2.1

3 years ago

12.2.0

3 years ago

12.1.0

3 years ago

12.0.12

3 years ago

12.0.8

3 years ago

12.0.7

3 years ago

12.0.3

3 years ago

12.0.4

3 years ago

12.0.6

3 years ago

12.0.2

3 years ago

12.0.0

3 years ago

11.3.0

3 years ago

11.2.1

3 years ago

11.2.0

3 years ago

11.0.2

3 years ago

11.0.1

3 years ago

10.47.4

3 years ago

10.47.3

3 years ago

10.47.0

3 years ago

10.46.3

3 years ago

10.46.2

3 years ago

10.46.1

3 years ago

10.45.0

3 years ago

10.44.4

3 years ago

10.44.3

3 years ago

10.44.1

3 years ago

10.44.0

3 years ago

10.43.3

3 years ago

10.43.2

3 years ago

10.43.1

3 years ago

10.42.3

3 years ago

10.42.2

3 years ago

10.42.0

3 years ago

10.42.1

3 years ago

10.41.0

3 years ago

10.40.1

3 years ago

10.40.0

3 years ago

10.39.8

3 years ago

10.39.7

3 years ago

10.39.6

3 years ago

10.39.4

3 years ago

10.39.2

3 years ago

10.39.3

3 years ago

10.39.1

4 years ago

10.38.0

4 years ago

10.37.1

4 years ago

10.36.2

4 years ago

10.36.0

4 years ago

10.35.1

4 years ago

10.34.0

4 years ago

10.33.0

4 years ago

10.32.0

4 years ago

10.30.1

4 years ago

10.30.0

4 years ago

10.27.1

4 years ago

10.27.0

4 years ago

10.24.0

4 years ago

10.23.0

4 years ago

10.22.1

4 years ago

10.22.0

4 years ago

10.21.0

4 years ago

10.20.0

4 years ago

10.19.0

4 years ago

10.18.7-canary.5

4 years ago

10.18.7-canary.6

4 years ago

10.18.7-canary.7

4 years ago

10.18.7-canary.4

4 years ago

10.18.7-canary.3

4 years ago

10.18.7-canary.2

4 years ago

10.18.7-canary.1

4 years ago

10.18.6-canary.1

4 years ago

10.18.7-canary.0

4 years ago

10.18.5-canary.4

4 years ago

10.18.6-canary.0

4 years ago

10.18.5

4 years ago

10.18.5-canary.3

4 years ago

10.18.5-canary.2

4 years ago

10.18.5-canary.1

4 years ago

10.18.5-canary.0

4 years ago

10.18.4

4 years ago

10.18.4-canary.9

4 years ago

10.18.4-canary.8

4 years ago

10.18.4-canary.7

4 years ago

10.18.4-canary.6

4 years ago

10.18.4-canary.3

4 years ago

10.18.4-canary.4

4 years ago

10.18.4-canary.5

4 years ago

10.18.4-canary.1

4 years ago

10.18.4-canary.2

4 years ago

10.18.4-canary.0

4 years ago

10.18.3-canary.2

4 years ago

10.18.3-canary.3

4 years ago

10.18.3-canary.1

4 years ago

10.18.3-canary.0

4 years ago

10.18.2

4 years ago

10.18.2-canary.3

4 years ago

10.18.2-canary.2

4 years ago

10.18.2-canary.1

4 years ago

10.17.1-canary.3

4 years ago

10.17.1-canary.2

4 years ago

10.18.2-canary.0

4 years ago

10.18.1-canary.0

4 years ago

10.18.0

4 years ago

10.17.1-canary.1

4 years ago

10.18.0-alpha.0

4 years ago

10.17.0

4 years ago

10.17.1-canary.0

4 years ago

10.16.1-canary.8

4 years ago

10.16.1-canary.7

4 years ago

10.16.1-canary.6

4 years ago

10.16.1-canary.5

4 years ago

10.16.1-canary.4

4 years ago

10.16.1-canary.3

4 years ago

10.16.1-canary.2

4 years ago

10.16.1-canary.1

4 years ago

10.16.1-canary.0

4 years ago

10.16.0

4 years ago

10.15.2-canary.4

4 years ago

10.15.2-canary.2

4 years ago

10.15.2-canary.3

4 years ago

10.15.2-canary.0

4 years ago

10.15.2-canary.1

4 years ago

10.15.1-canary.6

4 years ago

10.15.1

4 years ago

10.15.1-canary.4

4 years ago

10.15.0

4 years ago

10.14.3-canary.4

4 years ago

10.14.3-canary.1

4 years ago

10.14.1

4 years ago

10.14.1-canary.8

4 years ago

10.14.1-canary.7

4 years ago

10.14.1-canary.3

4 years ago

10.13.0

4 years ago

11.0.0-alpha.11

4 years ago

11.0.0-alpha.10

4 years ago

11.0.0-alpha.9

4 years ago

11.0.0-alpha.6

4 years ago

11.0.0-alpha.7

4 years ago

11.0.0-alpha.8

4 years ago

11.0.0-alpha.5

4 years ago

11.0.0-alpha.4

4 years ago

11.0.0-alpha.3

4 years ago

11.0.0-alpha.2

4 years ago

11.0.0-alpha.1

4 years ago

11.0.0-alpha.0

4 years ago