ViewOnly

The ViewOnly component displays data in a read-only format with label-value pairs. It supports single-column and responsive two-column layouts, loading states, and custom content.

Usage

import { ViewOnly } from '@harnessio/ui'

// ...

return (
  <ViewOnly
    title="Section Title"
    data={[
      { label: "Label 1", value: "Value 1" },
      { label: "Label 2", value: "Value 2" }
    ]}
  />
)

Single Column Layout

Force a single-column layout regardless of container width using the layout prop.

Two-Column Layout

By default, the component uses a responsive two-column layout when the container is wide enough (≥800px). Data is automatically split between columns.

Loading State

Display skeleton placeholders while data is being fetched.

Empty Values

When a value is empty or undefined, the component displays “empty” in a disabled style.

Custom Value Content

Values can be any React node, allowing for custom formatting and components.

ViewOnlyItem

You can also use the ViewOnlyItem component directly for more control.

API Reference

ViewOnly

The main component for displaying read-only data.

<ViewOnly
  title="Section Title"          // [OPTIONAL] Title displayed above the data
  data={[...]}                   // [REQUIRED] Array of label-value pairs or ReactNodes
  layout="columns"               // [OPTIONAL] Layout mode
  isLoading={false}              // [OPTIONAL] Show loading skeletons
  className="custom-class"       // [OPTIONAL] Custom class name
/>

Prop	Required	Default	Type
title	false		string
data	true		ViewOnlyItemData[]
layout	false	'columns'	'singleColumn' | 'columns'
isLoading	false	false	boolean
className	false		string

ViewOnlyItem

Individual item component for displaying a single label-value pair.

<ViewOnlyItem
  label="Field Label"            // [REQUIRED] Label text
  value="Field Value"            // [REQUIRED] Value to display
  isLoading={false}              // [OPTIONAL] Show loading skeleton
/>

Prop	Required	Default	Type
label	true		string
value	true		ReactNode
isLoading	false	false	boolean

ViewOnlyItemData

Type definition for data items.

type ViewOnlyItemData = { label: string; value: ReactNode } | ReactNode;