View User Block

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

Installation

npm

npm install @nodeblocks/frontend-view-user-block

yarn

yarn add @nodeblocks/frontend-view-user-block

pnpm

pnpm add @nodeblocks/frontend-view-user-block

bun

bun add @nodeblocks/frontend-view-user-block

What You Need

Item	Why it matters
labels.headerTitle	Main heading in the header
data	User fields as a Record<string, ReactNode> (row keys become labels) or ReactNode[] for value-only rows
labels.subheaderTitle (optional)	Secondary line under the header (for example registration date)
labels.headerActionButton + headerAction (optional)	Outlined header button label and click handler
layout (optional)	one-column stacks key/value rows; two-column shows them side by side (default)

User data lives in your app

ViewUser does not own user 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, layouts). Set labels.headerActionButton and headerAction to show the header action button with a handler.

Code Examples

Quick Start

Live Editor

function Example() {
  const labels = {
    headerTitle: 'Jane Smith',
    subheaderTitle: 'Member since Nov 22, 2023',
  };

  const data = {
    Email: 'jane.smith@example.com',
    Phone: '+1 (555) 123-4567',
    Role: 'Frontend Engineer',
    Location: 'San Francisco, CA',
  };

  return <ViewUser labels={labels} data={data} />;
}

Result

Loading...

Layouts

Try different layouts.

Live Editor

function Example() {
  const [layout, setLayout] = React.useState('two-column');

  const labels = {
    headerTitle: 'Jane Smith',
    subheaderTitle: 'Member since Nov 22, 2023',
  };

  const data = {
    Email: 'jane.smith@example.com',
    Phone: '+1 (555) 123-4567',
    Role: 'Frontend Engineer',
    Location: 'San Francisco, CA',
    Skills: 'React · TypeScript · Node.js · AWS',
  };

  return (
    <Box>
      <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
        <Box
          component="button"
          type="button"
          onClick={() => setLayout('two-column')}
          sx={{
            px: 1.5,
            py: 0.75,
            borderRadius: 1,
            border: '1px solid',
            borderColor: layout === 'two-column' ? 'primary.main' : 'divider',
            bgcolor: layout === 'two-column' ? 'primary.main' : 'background.paper',
            color: layout === 'two-column' ? 'primary.contrastText' : 'text.primary',
            cursor: 'pointer',
            fontSize: 14,
            fontWeight: layout === 'two-column' ? 600 : 400,
          }}
        >
          Two column
        </Box>
        <Box
          component="button"
          type="button"
          onClick={() => setLayout('one-column')}
          sx={{
            px: 1.5,
            py: 0.75,
            borderRadius: 1,
            border: '1px solid',
            borderColor: layout === 'one-column' ? 'primary.main' : 'divider',
            bgcolor: layout === 'one-column' ? 'primary.main' : 'background.paper',
            color: layout === 'one-column' ? 'primary.contrastText' : 'text.primary',
            cursor: 'pointer',
            fontSize: 14,
            fontWeight: layout === 'one-column' ? 600 : 400,
          }}
        >
          One column
        </Box>
      </Box>
      <ViewUser labels={labels} data={data} layout={layout} />
    </Box>
  );
}

Result

Loading...

Layout behaviors

two-column (default) shows each field label and value side by side. one-column stacks the label above the value with relaxed padding — useful on narrow viewports or dense profiles.

Compound Components

Compose ViewUser.Header, ViewUser.Subheader, and ViewUser.ItemList directly. Pass labels, data, and headerAction on children instead of only on the root.

Live Editor

function Example() {
  const [lastAction, setLastAction] = React.useState('');

  const data = {
    Email: 'jane.smith@example.com',
    Phone: '+1 (555) 123-4567',
    Role: 'Frontend Engineer',
    Location: 'San Francisco, CA',
  };

  return (
    <Box>
      <ViewUser layout="two-column">
        <ViewUser.Header
          labels={{
            headerTitle: 'Jane Smith',
            headerActionButton: 'Edit profile',
          }}
          headerAction={() => setLastAction('Edit profile')}
          sx={{
            px: 2,
            py: 1.5,
            bgcolor: 'grey.50',
            borderRadius: 2,
            border: '1px solid',
            borderColor: 'divider',
          }}
        />
        <ViewUser.Subheader
          labels={{ subheaderTitle: 'Member since Nov 22, 2023' }}
          sx={{ px: 2, fontStyle: 'italic', color: 'text.secondary' }}
        />
        <ViewUser.ItemList
          data={data}
          sx={{
            border: '1px solid',
            borderColor: 'divider',
            borderRadius: 2,
            overflow: 'hidden',
            '& .MuiListItem-root': { bgcolor: 'background.paper' },
          }}
        />
      </ViewUser>
      {lastAction ? (
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
          Last action: {lastAction}
        </Typography>
      ) : null}
    </Box>
  );
}

Result

Loading...

Block Override

Use function children with defaultBlocks and defaultBlockOrder to inject blocks, replace defaults, and control order.

Live Editor

function Example() {
  const [noticeVisible, setNoticeVisible] = React.useState(true);

  const labels = {
    headerTitle: 'Jane Smith',
    subheaderTitle: 'Profile review in progress',
  };

  const data = {
    Email: 'jane.smith@example.com',
    Phone: '+1 (555) 123-4567',
    Role: 'Frontend Engineer',
    Location: 'San Francisco, CA',
  };

  return (
    <ViewUser labels={labels} data={data}>
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          profileNotice: noticeVisible ? (
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: 2,
                px: 2,
                py: 1.5,
                mb: 1,
                borderRadius: 2,
                bgcolor: 'info.main',
                color: 'info.contrastText',
              }}
            >
              <Typography variant="body2" sx={{ fontWeight: 600 }}>
                Profile details were updated recently
              </Typography>
              <Box
                component="button"
                type="button"
                onClick={() => setNoticeVisible(false)}
                aria-label="Dismiss notification"
                sx={{
                  flexShrink: 0,
                  border: '1px solid rgba(255,255,255,0.35)',
                  bgcolor: 'rgba(255,255,255,0.12)',
                  color: 'inherit',
                  borderRadius: '50%',
                  width: 28,
                  height: 28,
                  cursor: 'pointer',
                  fontSize: 16,
                  lineHeight: 1,
                }}
              >
                ×
              </Box>
            </Box>
          ) : null,
          header: (
            <ViewUser.Header
              labels={labels}
              sx={{
                px: 2,
                py: 2,
                borderRadius: 2,
                border: '1px solid',
                borderColor: 'divider',
                bgcolor: 'background.paper',
              }}
            />
          ),
          itemList: (
            <ViewUser.ItemList
              data={data}
              sx={{
                mt: 2,
                border: '1px solid',
                borderColor: 'divider',
                borderRadius: 2,
                '& .MuiListItem-root:nth-of-type(even)': { bgcolor: 'grey.50' },
              }}
            />
          ),
        },
        blockOrder: [
          ...(noticeVisible ? ['profileNotice'] : []),
          'header',
          'subheader',
          'itemList',
        ],
      })}
    </ViewUser>
  );
}

Result

Loading...

When to use block overrides

Default defaultBlockOrder is header, subheader, itemList, item, itemKey, itemValue. The default render uses itemList to map data; the separate item / itemKey / itemValue entries are for granular overrides. This example prepends a dismissible profileNotice, replaces header and itemList with styled variants, and omits unused block keys from blockOrder.

Important Props

Core Props

Prop	Type	Required	Default	Description
data	Record<string, ReactNode> | ReactNode[]	No	undefined	Row content: object keys become field labels; arrays render value-only rows
labels	{ headerTitle?: string; headerActionButton?: string; subheaderTitle?: string }	No	{}	Header title, optional action button label, and subheader copy

Content Props

Prop	Type	Required	Default	Description
labels.headerTitle	string	No	undefined	Main heading in ViewUser.Header
labels.subheaderTitle	string	No	undefined	Secondary line under the header (ViewUser.Subheader)
labels.headerActionButton	string	No	undefined	Label for the outlined header button; shown when labels.headerActionButton or headerAction is set (or passed on ViewUser.HeaderActionButton)
headerAction	() => void	No	undefined	Invoked when the default header action button is clicked
layout	'one-column' | 'two-column'	No	'two-column'	Row layout: stacked key/value vs side-by-side columns

Layout and Composition Props

Prop	Type	Required	Default	Description
children	BlocksOverride | ReactNode	No	undefined	Compound JSX children or function override returning blocks and blockOrder
className	string	No	undefined	Class name on the root stack (nbb-view-user)
sx	SxProps	No	undefined	MUI system styles for the root stack (default render includes margin: 'auto')

ViewUser 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-component	Main Props	Inherits	Built on
ViewUser.Header	labels (headerTitle, headerActionButton), headerAction, children, className, sx	StackProps	Stack + Typography + optional ViewUser.HeaderActionButton
ViewUser.HeaderActionButton	labels (headerActionButton), headerAction, children, className, onClick	ButtonProps	Button (variant="outlined", size="medium")
ViewUser.Subheader	labels (subheaderTitle, headerTitle, headerActionButton), children, className, sx	StackProps	Stack + Typography
ViewUser.ItemList	data, children, className, sx	ListProps	List (component="dl") + ViewUser.Item rows
ViewUser.Item	layout, children, className, sx	ListItemProps	ListItem
ViewUser.Item.Key	layout, children, className, sx	TypographyProps	Typography (component="dt", variant="subtitle1")
ViewUser.Item.Value	layout, children, className, sx	TypographyProps	Typography (component="dd", variant="body2")

Default UI Blocks

Block	Built on	Notes
ViewUser (root)	Stack	Column layout with spacing={3}, margin: 'auto' (nbb-view-user)
header (ViewUser.Header)	Stack	Renders when labels.headerTitle, labels.headerActionButton, or custom children is set; includes ViewUser.HeaderActionButton when headerAction or labels.headerActionButton is set
subheader (ViewUser.Subheader)	Stack	Renders when labels.subheaderTitle or custom children is set
itemList (ViewUser.ItemList)	List	Maps data object entries or array values to key/value rows

Default root render order: header → subheader → itemList.

TypeScript

import * as React from 'react';
import { ViewUser } from '@nodeblocks/frontend-view-user-block';
import type { ReactNode } from 'react';

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

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

export function UserDetailView() {
  const labels: UserLabels = {
    headerTitle: 'Jane Smith',
    subheaderTitle: 'Member since Nov 22, 2023',
    headerActionButton: 'Edit profile',
  };

  const data: UserData = {
    Email: 'jane.smith@example.com',
    Phone: '+1 (555) 123-4567',
    Role: 'Frontend Engineer',
  };

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