Diff

How to get Diff

import { Diff } from 'fds/components';

Type: Component

A component that is closely related to TextAreaWithDiff. This component is non-interactive, it only shows a "diff" between the given "originalValue" and "value". The diff is visualized by rendering red strikethrough and underlined text for deletions and green underlined text for additions. The text that makes up the value can be selected.

Props

# Name Type Description
1. [isSingleLine] Boolean

Whether or not to render the diff as a single line that is truncated if it is longer than the available space, or as a multiline component that breaks long words if they don't fit the available horizontal space.


  Default value
false
2. originalValue String

The original value to compare the current "value" against.

3. [userSelect] String

The CSS value for user-select. The possible values are:

  • 'none',

  • 'text'

Defaults to 'text'.

  Default value
"text"
4. value String

The current value of the component. This value should be a valid string.

Was this page helpful?