Skip to main content

View Organization Block

The ViewOrganization Component is a fully customizable and accessible organization display component built with React and TypeScript. 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

📖 Usage​

import {ViewOrganization} from '@nodeblocks/frontend-view-organization-block';
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: 'business', value: 'Technology' },
        { icon: 'location_on', 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' }
      ]}
      style={{padding: '16px'}}>
      <ViewOrganization.CompanyBanner />
      <ViewOrganization.CompanyName />
      <ViewOrganization.Tags />
      <ViewOrganization.AboutCompany />
      <ViewOrganization.BusinessActivities />
      <ViewOrganization.CorporateInformation />
    </ViewOrganization>
  );
}
Result
Loading...

🔧 Props Reference​

Main Component Props​

PropTypeDefaultDescription
labelsLabelsRequiredLabels configuration for different sections
labels.companyAboutReactNodeundefinedLabel for the company about section
labels.companyActivitiesReactNodeundefinedLabel for the company activities section
labels.companyRegisteredInformationReactNodeundefinedLabel for the registered information section
companyLogoUrlstringundefinedURL for the company logo image
companyNameReactNodeundefinedCompany name to display
companyTagsArray<{icon: IconType, value: string}>undefinedArray of tags with icons and values
companyAboutReactNodeundefinedCompany about description content
companyActivitiesReactNodeundefinedCompany activities description content
companyRegisteredInformationArray<{label: ReactNode, value: string}>undefinedArray of registered information items
childrenBlocksOverrideundefinedCustom block components to override default rendering
classNamestringundefinedAdditional CSS class name for styling the container

Note: This component inherits all props from the HTML div element.

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​

PropTypeDefaultDescription
sizeenum"S"Size of the tag
iconenumundefinedIcon to display in the tag
labelstringundefinedText content of the tag
classNamestringundefinedAdditional CSS class name for styling

ViewOrganization.Title​

PropTypeDefaultDescription
prefixReactNodeundefinedContent to display before the title
companyNameReactNodeFrom contextCompany name to display as title
childrenReactNodecompanyNameTitle content - overrides companyName if provided
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
classNamestringundefinedAdditional CSS class name for styling

ViewOrganization.DescriptionDetailBlock​

PropTypeDefaultDescription
iconenumundefinedIcon to display next to the label
labelReactNodeundefinedLabel text for the detail block
valueReactNodeundefinedValue content for the detail block
childrenReactNodeDefault contentCustom content - overrides default label/value layout
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
classNamestringundefinedAdditional CSS class name for styling

ViewOrganization.CompanyBanner​

PropTypeDefaultDescription
companyLogoUrlstringFrom contextURL for the company logo image
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
classNamestringundefinedAdditional CSS class name for styling

ViewOrganization.CompanyName​

PropTypeDefaultDescription
companyNameReactNodeFrom contextCompany name to display
childrenReactNodecompanyNameTitle content - overrides companyName if provided
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
classNamestringundefinedAdditional CSS class name for styling

ViewOrganization.Tags​

PropTypeDefaultDescription
companyTagsArray<{icon: IconType, value: string}>From contextArray of tags to display
childrenReactNodeDefault tagsCustom tags content - overrides companyTags if provided
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
classNamestringundefinedAdditional CSS class name for styling

ViewOrganization.AboutCompany​

PropTypeDefaultDescription
companyAboutReactNodeFrom contextCompany about content
iconenum"business"Icon for the about section
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
classNamestringundefinedAdditional CSS class name for styling

ViewOrganization.BusinessActivities​

PropTypeDefaultDescription
companyActivitiesReactNodeFrom contextCompany activities content
iconenum"sticky_note_2"Icon for the activities section
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
classNamestringundefinedAdditional CSS class name for styling

ViewOrganization.CorporateInformation​

PropTypeDefaultDescription
companyRegisteredInformationArray<{label: ReactNode, value: string}>From contextArray of registered information items
iconenum"info"Icon for the corporate information section
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
classNamestringundefinedAdditional CSS class name for styling

🔧 TypeScript Support​

Full TypeScript support with comprehensive type definitions:

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

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

// Component props interface
interface ViewOrganizationProps {
  labels: Labels;
  companyLogoUrl?: string;
  companyName?: ReactNode;
  companyTags?: { icon: IconType; value: string }[];
  companyAbout?: ReactNode;
  companyActivities?: ReactNode;
  companyRegisteredInformation?: { label: ReactNode; value: string }[];
  className?: string;
}

const MyViewOrganization = () => {
  const organizationData = {
    labels: {
      companyAbout: "About Our Company",
      companyActivities: "What We Do", 
      companyRegisteredInformation: "Legal Information"
    },
    companyLogoUrl: "https://example.com/logo.png",
    companyName: "Tech Solutions Inc.",
    companyTags: [
      { icon: 'business' as IconType, value: 'Technology' },
      { icon: 'location_on' as IconType, value: 'San Francisco' },
      { icon: 'people' as IconType, value: '500+ Employees' }
    ],
    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>
  );
};

Built with ❤️ using React, TypeScript, and modern web standards.