TextAreaWithDiff

Type: React component

How to get TextAreaWithDiff?

JavaScript

import { TextAreaWithDiff } from 'fds/components';

A special version of TextArea that has an extra "originalValue" prop. This prop is compared to the current "value" and a "Show changes" text link is rendered below the text area to toggle between an editable text area and a non-editable diff view. The diff is visualized by rendering red strikethrough and underlined text for deletions and green underlined text for additions.

Props

  1. isDisabled

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a disabled state.

    Default value

  2. name

    (Optional)

    Type: String

    The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.

    Default value

  3. onChange

    (Optional)

    Type: Function

    A callback that is called whenever a component's value changes.

    This callback is called just before the "validate" prop is called.

    Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.

    Arguments

    Default value

  4. originalValue

    (Optional)

    Type: String

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

    Important: Make sure to set BOTH the "value" and the "originalValue" props to start with an empty diff. Then only update the "value" prop when "onChange" is called.

    Default value

  5. placeholder

    (Optional)

    Type: String

    The placeholder text displayed in component when it is empty, i.e. has no values.

    Default value

  6. rows

    (Optional)

    Type: Number | Object

    The number of text lines that should be visible before overflowing and showing a vertical scrollbar.

    When passing in a number, you specify a fixed amount of text lines.

    When passing in an object with properties "minimum" and "maximum", the TextArea will auto-grow based on the amount of text lines present in the TextArea. Starting at the specified minimum and not exceeding the specified maximum. If the number of maximum rows is exceeded, a scrollbar will show.

    Default value

  7. tooltipContent

    (Optional)

    Type: String | ReactElement

    The content of the tooltip that is displayed when hovering over the whole component.

    • string: the textual content of the tooltip

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

    Default value

  8. validate

    (Optional)

    Type: Function

    A callback that is called directly after the value(s) of a form component change(s).

    Use this callback to check the selected value(s) against business rules and to set any feedback for the user based on this.

    Arguments

    Returns

    Default value

  9. value

    (Optional)

    Type: String

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

    Default value