Skip to main content

View Basic Information Block

ViewBasicInformation is a key-value view block built on MUI with a header (title and optional action button), optional subheader.

Installationโ€‹

npm install @nodeblocks/frontend-view-basic-information-block

What You Needโ€‹

ItemWhy it matters
labels.headerTitleMain heading in the header (default ๅŸบๆœฌๆƒ…ๅ ฑ)
dataField rows as a Record<string, ReactNode> (row keys become labels) or ReactNode[] for value-only rows
labels.headerActionButton + headerAction (optional)Outlined header button label (default ็ทจ้›†) and click handler
labels.subheaderTitle (optional)Secondary line under the header
Basic information data lives in your app

ViewBasicInformation does not own state - pass labels, data, and optional headerAction from your page. Object data keys become row labels; values can be strings or React nodes (multi-line text, links, custom layouts). Set labels.headerActionButton and headerAction to show the header action button.

Code Examplesโ€‹

Live Editor
function Example() {
  const data = {
    Name: (
      <div>
        <div>Hanako Iwata</div>
        <div>IWATA HANAKO</div>
      </div>
    ),
    Address: '1-1-1 Higashiyoshinocho, Tokushima-shi, Tokushima 771-0801',
    Phone: '+81 90-1111-1111',
  };

  return <ViewBasicInformation data={data} />;
}
Result
Loading...

Important Propsโ€‹

Core Propsโ€‹

PropTypeRequiredDefaultDescription
dataRecord<string, ReactNode> | ReactNode[]No{ ๆฐๅ: <></>, ไฝๆ‰€: <></>, ้€ฃ็ตกๅ…ˆ้›ป่ฉฑ็•ชๅท: <></> }Row content: object keys become field labels; arrays render value-only rows
labels{ headerTitle?: string; headerActionButton?: string; subheaderTitle?: string }No{ headerTitle: 'ๅŸบๆœฌๆƒ…ๅ ฑ', headerActionButton: '็ทจ้›†' }Header title, optional action button label, and optional subheader copy

Content Propsโ€‹

PropTypeRequiredDefaultDescription
labels.headerTitlestringNoๅŸบๆœฌๆƒ…ๅ ฑMain heading in ViewBasicInformation.Header
labels.subheaderTitlestringNoundefinedSecondary line under the header (ViewBasicInformation.Subheader)
labels.headerActionButtonstringNo็ทจ้›†Label for the outlined header button; shown when labels.headerActionButton or headerAction is set (or passed on ViewBasicInformation.HeaderActionButton)
headerAction() => voidNoundefinedInvoked when the default header action button is clicked.

Layout and Composition Propsโ€‹

PropTypeRequiredDefaultDescription
childrenBlocksOverride | ReactNodeNoundefinedCompound JSX children or function override returning blocks and blockOrder
classNamestringNoundefinedClass name on the root stack (nbb-view-basic-information)
sxSxPropsNo[{ margin: 'auto' }, ...sx]MUI system styles for the root stack; default render prepends margin: 'auto'

ViewBasicInformation inherits StackProps (except children). Default defaultBlockOrder: header, subheader, itemList, item, itemKey, itemValue.

Sub-component propsโ€‹

Sub-components read from context and accept the same content keys as props to override locally.

Sub-componentMain PropsInheritsBuilt on
ViewBasicInformation.Headerlabels (headerTitle, headerActionButton), headerAction, children, className, sxStackPropsStack + Typography + optional ViewBasicInformation.HeaderActionButton
ViewBasicInformation.HeaderActionButtonlabels (headerActionButton), headerAction, children, className, onClickButtonPropsButton (variant="outlined", size="medium")
ViewBasicInformation.Subheaderlabels (subheaderTitle, headerTitle, headerActionButton), children, className, sxStackPropsStack + Typography
ViewBasicInformation.ItemListdata, children, className, sxListPropsList (component="dl") + ViewBasicInformation.Item rows
ViewBasicInformation.Itemchildren, className, sxListItemPropsListItem
ViewBasicInformation.Item.Keychildren, className, sxTypographyPropsTypography (component="dt", variant="subtitle1")
ViewBasicInformation.Item.Valuechildren, className, sxTypographyPropsTypography (component="dd", variant="body2")

Default UI Blocksโ€‹

BlockBuilt onNotes
ViewBasicInformation (root)StackColumn layout with spacing={3}, margin: 'auto' (nbb-view-basic-information)
header (ViewBasicInformation.Header)StackRenders when labels.headerTitle, labels.headerActionButton, or custom children is set; includes ViewBasicInformation.HeaderActionButton when headerAction or labels.headerActionButton is set
subheader (ViewBasicInformation.Subheader)StackRenders when labels.subheaderTitle or custom children is set
itemList (ViewBasicInformation.ItemList)ListMaps data object entries or array values to key/value rows

Default root render order: header -> subheader -> itemList.

TypeScriptโ€‹

import * as React from 'react';
import { ViewBasicInformation } from '@nodeblocks/frontend-view-basic-information-block';
import type { ReactNode } from 'react';

type BasicInformationLabels = {
  headerTitle?: string;
  headerActionButton?: string;
  subheaderTitle?: string;
};

type BasicInformationData = Record<string, ReactNode> | ReactNode[];

export function BasicInformationDetailView() {
  const labels: BasicInformationLabels = {
    headerTitle: 'Basic information',
    headerActionButton: 'Edit',
  };

  const data: BasicInformationData = {
    Name: 'Hanako Iwata',
    Address: '1-1-1 Higashiyoshinocho, Tokushima-shi, Tokushima 771-0801',
    Phone: '+81 90-1111-1111',
  };

  return (
    <ViewBasicInformation
      labels={labels}
      data={data}
      headerAction={() => {
        /* navigate or open edit dialog */
      }}
    />
  );
}