Text diff
The hook, useEuiTextDiff, generates a set of changes between two strings. It returns both React elements for displaying the diff and an object representing the identified changes. The timeout prop is used to set how many seconds any diff's exploration phase may take. The default value is 0.1, a value of 0 disables the timeout and lets diff run until completion. The higher the timeout, the more detailed the comparison.
const [rendered, textDiffObject] = useEuiTextDiff({ beforeText, afterText });
Custom rendered elements
By default, the hook will wrap deletions with <del> and insertions with <ins> elements. You can replace these elements with the deleteComponent and insertComponent props respectively.
Also, since rendered is simple html string, you can wrap it in any contextual element like
Props
useEuiTextDiff
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop beforeText# | Description and type The starting string string | Default value |
Prop afterText# | Description and type The string used to compare against string | Default value |
Prop insertComponent# | Description and type HTML element to wrap insertion differences. ElementType | Default value ins |
Prop deleteComponent# | Description and type HTML element to wrap deletion differences. ElementType | Default value del |
Prop sameComponent# | Description and type HTML element to wrap text with no differences. ElementType | Default value |
Prop timeout# | Description and type Time in milliseconds. Passing a timeout of value '0' disables the timeout state number | Default value 0.1 |