View Organization Block

The ViewOrganization Component is a fully customizable and accessible organization display component built with React, TypeScript, and MUI. It provides a complete interface for displaying organization information with modern design patterns, flexible layout options, and comprehensive customization capabilities.

🚀 Installation

npm install @nodeblocks/frontend-view-organization-block@0.2.0

📖 Usage

import {ViewOrganization} from '@nodeblocks/frontend-view-organization-block';

Basic Usage
Advanced Usage

Live Editor

function BasicViewOrganization() {
  return (
    <ViewOrganization
      labels={{
        companyAbout: 'About Company',
        companyActivities: 'Business Activities',
        companyRegisteredInformation: 'Registered Information',
      }}
      companyLogoUrl="/img/icon.png"
      companyName="Tech Solutions Inc."
      companyTags={[
        {icon: undefined, value: 'Technology'},
        {icon: undefined, value: 'San Francisco'},
      ]}
      companyAbout="We are a leading technology company focused on innovative solutions."
      companyActivities="Software development, consulting, and digital transformation services."
      companyRegisteredInformation={[
        {label: 'Registration Number:', value: '12345678'},
        {label: 'Tax ID:', value: 'TAX-987654321'},
        {label: 'Founded:', value: '2010'},
      ]}
    >
      <ViewOrganization.CompanyBanner />
      <ViewOrganization.CompanyName />
      <ViewOrganization.Tags />
      <ViewOrganization.AboutCompany />
      <ViewOrganization.BusinessActivities />
      <ViewOrganization.CorporateInformation />
    </ViewOrganization>
  );
}

Result

Live Editor

function AdvancedViewOrganization() {
  return (
    <ViewOrganization
      labels={{
        companyAbout: '企業概要',
        companyActivities: '事業内容',
        companyRegisteredInformation: '登録情報',
      }}
      companyLogoUrl="/img/icon.png"
      companyName="株式会社テクノロジー・イノベーション"
      companyTags={[
        {icon: undefined, value: 'テクノロジー'},
        {icon: undefined, value: '東京都渋谷区'},
        {icon: undefined, value: '従業員500名'},
        {icon: undefined, value: '上場企業'},
      ]}
      companyAbout="私たちは、最新のテクノロジーを活用して企業のデジタル変革を支援する革新的な技術企業です。"
      companyActivities="ソフトウェア開発、AIソリューション、クラウドインフラストラクチャ、デジタルトランスフォーメーションコンサルティング"
      companyRegisteredInformation={[
        {label: '法人番号:', value: '1234567890123'},
        {label: '資本金:', value: '10億円'},
        {label: '設立年月日:', value: '2008年4月1日'},
        {label: '本店所在地:', value: '東京都渋谷区神宮前1-1-1'},
      ]}
      sx={{
        background: 'linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%)',
        borderRadius: '20px',
        border: '1px solid #e2e8f0',
      }}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          companyBanner: {
            ...defaultBlocks.companyBanner,
            props: {
              ...defaultBlocks.companyBanner.props,
              sx: {
                background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)',
                borderRadius: '14px',
                padding: '24px',
                textAlign: 'center',
              },
            },
          },
          companyName: {
            ...defaultBlocks.companyName,
            props: {
              ...defaultBlocks.companyName.props,
              sx: {
                textAlign: 'center',
                '& .MuiTypography-root': {
                  color: '#0f172a',
                  fontSize: '1.5rem',
                },
              },
            },
          },
          aboutCompany: {
            ...defaultBlocks.aboutCompany,
            props: {
              ...defaultBlocks.aboutCompany.props,
              sx: {
                background: 'white',
                borderRadius: '14px',
                padding: '20px',
                border: '1px solid #e2e8f0',
              },
            },
          },
          businessActivities: {
            ...defaultBlocks.businessActivities,
            props: {
              ...defaultBlocks.businessActivities.props,
              sx: {
                background: 'white',
                borderRadius: '14px',
                padding: '20px',
                border: '1px solid #e2e8f0',
              },
            },
          },
          corporateInformation: {
            ...defaultBlocks.corporateInformation,
            props: {
              ...defaultBlocks.corporateInformation.props,
              sx: {
                background: 'white',
                borderRadius: '14px',
                padding: '20px',
                border: '1px solid #e2e8f0',
              },
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </ViewOrganization>
  );
}

Result

🔧 Props Reference

Main Component Props

Prop	Type	Default	Description
`labels`	`Labels`	Required	Labels configuration for different sections
`labels.companyAbout`	`ReactNode`	`undefined`	Label for the company about section
`labels.companyActivities`	`ReactNode`	`undefined`	Label for the company activities section
`labels.companyRegisteredInformation`	`ReactNode`	`undefined`	Label for the registered information section
`companyLogoUrl`	`string`	`undefined`	URL for the company logo image
`companyName`	`ReactNode`	`undefined`	Company name to display
`companyTags`	`Array<{icon?: SvgIconComponent, value: string}>`	`undefined`	Array of tags with MUI icons and values
`companyAbout`	`ReactNode`	`undefined`	Company about description content
`companyActivities`	`ReactNode`	`undefined`	Company activities description content
`companyRegisteredInformation`	`Array<{label: ReactNode, value: string}>`	`undefined`	Array of registered information items
`children`	`BlocksOverride`	`undefined`	Function to override default blocks
`className`	`string`	`undefined`	Additional CSS class name for styling the container

Note: The main component inherits MUI Stack props. Root container uses direction="column", spacing={3}, and sx={{ p: 3 }} by default.

Sub-Components

The ViewOrganization component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

ViewOrganization.Tag

Displays a single tag with an optional icon.

Prop	Type	Default	Description
`icon`	`SvgIconComponent`	`undefined`	MUI icon component to display
`label`	`ReactNode`	`undefined`	Text content of the tag (can be array for multiple values)
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits MUI Box props. Uses display: 'inline-flex', alignItems: 'center', gap: 1.5.

ViewOrganization.Title

Displays the organization title/name.

Prop	Type	Default	Description
`prefix`	`ReactNode`	`undefined`	Content to display before the title
`companyName`	`ReactNode`	From context	Company name to display as title
`children`	`ReactNode`	`companyName`	Title content - overrides companyName if provided
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits MUI Box props. Uses Typography with variant="h6", component="h6", fontWeight="bold".

ViewOrganization.DescriptionDetailBlock

A reusable block for displaying labeled content with an optional icon.

Prop	Type	Default	Description
`icon`	`SvgIconComponent`	`StickyNote2Outlined`	MUI icon component for the label
`label`	`ReactNode`	`undefined`	Label text for the detail block
`value`	`ReactNode`	`undefined`	Value content for the detail block
`children`	`ReactNode`	Default layout	Custom content - overrides default label/value layout
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits MUI Stack props with direction="column", spacing={2}.

ViewOrganization.CompanyBanner

Displays the company logo/banner image.

Prop	Type	Default	Description
`companyLogoUrl`	`string`	From context	URL for the company logo image
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits DescriptionDetailBlock props. Logo image has height: 60 by default.

ViewOrganization.CompanyName

Displays the company name using the Title component.

Prop	Type	Default	Description
`companyName`	`ReactNode`	From context	Company name to display
`children`	`ReactNode`	`companyName`	Content - overrides companyName if provided
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits ViewOrganization.Title props.

ViewOrganization.Tags

Displays a list of company tags.

Prop	Type	Default	Description
`companyTags`	`Array<{icon?: SvgIconComponent, value: string}>`	From context	Array of tags to display
`children`	`ReactNode`	Default tags	Custom tags content - overrides companyTags if provided
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits MUI Stack props with direction="column", spacing={0.5}.

ViewOrganization.AboutCompany

Displays the company about section.

Prop	Type	Default	Description
`companyAbout`	`ReactNode`	From context	Company about content
`labels`	`Labels`	From context	Labels for section title
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits DescriptionDetailBlock props. Uses BusinessOutlined icon by default. Default label is "About".

ViewOrganization.BusinessActivities

Displays the company business activities section.

Prop	Type	Default	Description
`companyActivities`	`ReactNode`	From context	Company activities content
`labels`	`Labels`	From context	Labels for section title
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits DescriptionDetailBlock props. Uses StickyNote2Outlined icon by default. Default label is "Business Activities".

ViewOrganization.CorporateInformation

Displays the registered/corporate information in a table-like format.

Prop	Type	Default	Description
`companyRegisteredInformation`	`Array<{label: ReactNode, value: string}>`	From context	Array of registered information items
`className`	`string`	`undefined`	Additional CSS class name for styling

Note: This component inherits DescriptionDetailBlock props. Renders items as rows with label (width: 204px) and value columns.

🎨 Configuration examples

Custom Styled Components

import {Typography} from '@mui/material';

function StyledViewOrganizationComponents() {
  return (
    <ViewOrganization
      labels={{
        companyAbout: 'About',
        companyActivities: 'Activities',
        companyRegisteredInformation: 'Info',
      }}
      companyLogoUrl="/logo.png"
      companyName="Styled Company"
      companyTags={[{icon: undefined, value: 'Tag 1'}]}
      companyAbout="About text"
      companyActivities="Activities text"
      companyRegisteredInformation={[{label: 'ID:', value: '123'}]}
    >
      <ViewOrganization.CompanyBanner
        sx={{
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          borderRadius: '16px',
          p: 4,
        }}
      />
      <ViewOrganization.CompanyName>
        <Typography variant="h4" fontWeight="bold" color="primary">
          My Custom Company Name
        </Typography>
      </ViewOrganization.CompanyName>
      <ViewOrganization.Tags />
      <ViewOrganization.AboutCompany />
      <ViewOrganization.BusinessActivities />
      <ViewOrganization.CorporateInformation />
    </ViewOrganization>
  );
}

Block Override Pattern

function BlockOverrideViewOrganization() {
  return (
    <ViewOrganization
      labels={{
        companyAbout: 'About',
        companyActivities: 'Activities',
        companyRegisteredInformation: 'Info',
      }}
      companyLogoUrl="/logo.png"
      companyName="Company"
      companyTags={[{icon: undefined, value: 'Tag'}]}
      companyAbout="About"
      companyActivities="Activities"
      companyRegisteredInformation={[{label: 'ID:', value: '1'}]}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          aboutCompany: {
            ...defaultBlocks.aboutCompany,
            props: {
              ...defaultBlocks.aboutCompany.props,
              sx: {
                background: 'linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%)',
                borderRadius: '16px',
                p: 3,
              },
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </ViewOrganization>
  );
}

Comprehensive Organization Display

function ComprehensiveOrganization() {
  const registeredInfo = [
    {label: 'Company Registration:', value: 'REG-2024-12345'},
    {label: 'Tax Identification:', value: 'TIN-987654321'},
    {label: 'Founded:', value: 'January 2010'},
    {label: 'Headquarters:', value: 'San Francisco, CA'},
    {label: 'Employees:', value: '500+'},
    {label: 'Industry:', value: 'Technology / Software'},
  ];

  return (
    <ViewOrganization
      labels={{
        companyAbout: '🏢 About Our Company',
        companyActivities: '💼 Our Services',
        companyRegisteredInformation: '📋 Corporate Information',
      }}
      companyLogoUrl="/img/logo-large.png"
      companyName="Global Tech Solutions Inc."
      companyTags={[
        {icon: undefined, value: '🌍 Global Presence'},
        {icon: undefined, value: '🏆 Industry Leader'},
        {icon: undefined, value: '🚀 Innovation Driven'},
        {icon: undefined, value: '👥 500+ Employees'},
      ]}
      companyAbout={
        <div>
          <p>
            Global Tech Solutions Inc. is a leading technology company dedicated to transforming businesses through
            innovative digital solutions. With over a decade of experience, we have helped hundreds of companies achieve
            their digital transformation goals.
          </p>
          <p style={{marginTop: '12px'}}>
            Our team of expert engineers, designers, and consultants work together to deliver cutting-edge solutions
            that drive business growth and efficiency.
          </p>
        </div>
      }
      companyActivities={
        <ul style={{margin: 0, paddingLeft: '20px'}}>
          <li>Enterprise Software Development</li>
          <li>Cloud Infrastructure Solutions</li>
          <li>AI & Machine Learning Services</li>
          <li>Digital Transformation Consulting</li>
          <li>Cybersecurity Services</li>
          <li>24/7 Technical Support</li>
        </ul>
      }
      companyRegisteredInformation={registeredInfo}
      sx={{maxWidth: '800px', mx: 'auto'}}
    >
      <ViewOrganization.CompanyBanner />
      <ViewOrganization.CompanyName />
      <ViewOrganization.Tags />
      <ViewOrganization.AboutCompany />
      <ViewOrganization.BusinessActivities />
      <ViewOrganization.CorporateInformation />
    </ViewOrganization>
  );
}

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import {SvgIconComponent} from '@mui/icons-material';
import {StackProps} from '@mui/material';
import {ViewOrganization} from '@nodeblocks/frontend-view-organization-block';
import {ReactNode} from 'react';

// Labels interface
interface Labels {
  companyAbout?: ReactNode;
  companyActivities?: ReactNode;
  companyRegisteredInformation?: ReactNode;
}

// Tag interface
interface CompanyTag {
  icon: SvgIconComponent | undefined;
  value: string;
}

// Registered information interface
interface RegisteredInfo {
  label: ReactNode;
  value: string;
}

// Main component props interface
interface ViewOrganizationProps extends Omit<StackProps, 'children'> {
  labels: Labels;
  companyLogoUrl?: string;
  companyName?: ReactNode;
  companyTags?: CompanyTag[];
  companyAbout?: ReactNode;
  companyActivities?: ReactNode;
  companyRegisteredInformation?: RegisteredInfo[];
}

function TypedViewOrganizationExample() {
  const organizationData: Omit<ViewOrganizationProps, 'children'> = {
    labels: {
      companyAbout: 'About Our Company',
      companyActivities: 'What We Do',
      companyRegisteredInformation: 'Legal Information',
    },
    companyLogoUrl: 'https://example.com/logo.png',
    companyName: 'Tech Solutions Inc.',
    companyTags: [
      {icon: undefined, value: 'Technology'},
      {icon: undefined, value: 'San Francisco'},
    ],
    companyAbout: 'We are a leading technology company...',
    companyActivities: 'Software development, consulting...',
    companyRegisteredInformation: [
      {label: 'Registration Number:', value: '12345678'},
      {label: 'Tax ID:', value: 'TAX-987654321'},
    ],
  };

  return (
    <ViewOrganization {...organizationData}>
      <ViewOrganization.CompanyBanner />
      <ViewOrganization.CompanyName />
      <ViewOrganization.Tags />
      <ViewOrganization.AboutCompany />
      <ViewOrganization.BusinessActivities />
      <ViewOrganization.CorporateInformation />
    </ViewOrganization>
  );
}

📝 Notes

The root component uses MUI's Stack with direction="column", spacing={3}, and sx={{ p: 3 }} padding
Icons must be MUI SvgIconComponent types (e.g., BusinessOutlined, LocationOnOutlined)
ViewOrganization.Tag displays icon with fontSize="small" and color="primary"
ViewOrganization.Title uses MUI Typography with variant="h6" and fontWeight="bold"
ViewOrganization.DescriptionDetailBlock is the base component for AboutCompany, BusinessActivities, and CorporateInformation
ViewOrganization.AboutCompany uses BusinessOutlined icon by default with fallback label "About"
ViewOrganization.BusinessActivities uses StickyNote2Outlined icon by default with fallback label "Business Activities"
ViewOrganization.CorporateInformation renders items as rows with borders and fixed label width (204px)
Company banner logo has a default height of 60px
All sub-components inherit their respective MUI component props and support the sx prop for styling
Block override pattern allows customizing, replacing, or reordering default blocks

Built with ❤️ using React, TypeScript, and MUI.

🚀 Installation​

📖 Usage​

🔧 Props Reference​

Main Component Props​

Sub-Components​

ViewOrganization.Tag​

ViewOrganization.Title​

ViewOrganization.DescriptionDetailBlock​

ViewOrganization.CompanyBanner​

ViewOrganization.CompanyName​

ViewOrganization.Tags​

ViewOrganization.AboutCompany​

ViewOrganization.BusinessActivities​

ViewOrganization.CorporateInformation​

🎨 Configuration examples​

Custom Styled Components​

Block Override Pattern​

Comprehensive Organization Display​

🔧 TypeScript Support​

📝 Notes​