Diff

Type: React component

How to get Diff?

JavaScript

import { Diff } from 'fds/components';

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

  1. isSingleLine

    (Optional)

    Type: 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

  2. originalValue

    (Required)

    Type: String

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

  3. userSelect

    (Optional)

    Type: String

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

    • 'none',

    • 'text'

    Defaults to 'text'.

    Default value

  4. value

    (Required)

    Type: String

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