Skip to main content

View Product Block

The ViewProduct Component is a fully customizable product display component built with TypeScript and MUI. It provides a complete interface for viewing product details including organization information, product images, chips, tags, sections, and customizable actions with modern design patterns.

πŸš€ Installation​

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

πŸ“– Usage​

import {ViewProduct} from '@nodeblocks/frontend-view-product-block';
Live Editor
function BasicViewProduct() {
  const chips: ProductChip[] = [{label: 'New'}, {label: 'Featured'}];

  const tags: ProductTag[] = [{label: 'Premium'}, {label: ['Electronics', 'Mobile']}];

  const sections: ProductSection[] = [
    {label: 'Model', value: 'iPhone 15 Pro'},
    {label: 'Price', value: '$999'},
    {label: 'Availability', value: 'In Stock'},
  ];

  const actions: ProductAction[] = [
    {label: 'Add to Cart', onClick: () => console.log('Added to cart')},
    {label: 'Buy Now', onClick: () => console.log('Buy now clicked')},
  ];

  return (
    <ViewProduct
      organizationName="TechStore"
      imageUrl="/img/undraw_docusaurus_react.svg"
      imageAlt="iPhone 15 Pro"
      chips={chips}
      headerTitle="iPhone 15 Pro - Latest Model"
      tags={tags}
      sections={sections}
      actions={actions}
      sx={{backgroundColor: 'white', padding: '16px'}}
    >
      <ViewProduct.Header>
        <ViewProduct.CompanyName />
        <ViewProduct.Image />
        <ViewProduct.Chips />
        <ViewProduct.Title />
      </ViewProduct.Header>
      <ViewProduct.Content />
      <ViewProduct.Actions />
    </ViewProduct>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
organizationNamestringundefinedName of the organization selling the product
imageUrlstringRequiredSource URL for the main product image
imageAltstringundefinedAlt text for the product image
chipsArray<{label: string}>RequiredArray of chip labels to display
headerTitlestringRequiredMain title text for the product
tagsArray<{label: string | string[]}>RequiredArray of tags with single or multiple labels
sectionsArray<{icon?: SvgIconComponent, label: string, value: string}>RequiredArray of information sections with optional MUI icons
actionsArray<{label: ReactNode, onClick: () => void}>undefinedArray of action buttons
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedCustom block components to override default rendering
sxSxPropsundefinedMUI sx prop for custom styling
spacingnumber2Spacing between child elements

Note: This component extends MUI StackProps, inheriting all Stack component props.

Sub-Components​

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

ViewProduct.CompanyName​

Displays the organization name as a heading.

PropTypeDefaultDescription
organizationNamestringFrom contextOrganization name to display
childrenReactNodeFrom contextCustom content to override default company name
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TypographyProps with variant="h6" and component="h6".

ViewProduct.Image​

Displays the main product image.

PropTypeDefaultDescription
imageUrlstringFrom contextSource URL for the product image
imageAltstringFrom contextAlt text for the product image
childrenReactNodeFrom contextCustom content to override default image
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI BoxProps.

ViewProduct.Chips​

Container for displaying product chips.

PropTypeDefaultDescription
chipsArray<{label: string}>From contextArray of chips to display
childrenReactNodeFrom contextCustom content to override default chips
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop for custom styling

Note: This component extends MUI StackProps with direction="row" and spacing={0.5}.

ViewProduct.Title​

Displays the product title as a heading.

PropTypeDefaultDescription
headerTitlestringFrom contextTitle text to display
childrenReactNodeFrom contextCustom content to override default title
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TypographyProps with variant="h6" and component="h6".

ViewProduct.Header​

Container for the product header including company name, image, chips, and title.

PropTypeDefaultDescription
organizationNamestringFrom contextOrganization name for the header
imageUrlstringFrom contextProduct image URL
imageAltstringFrom contextProduct image alt text
chipsArray<{label: string}>From contextArray of chips
headerTitlestringFrom contextProduct title
childrenReactNodeFrom contextCustom content to override default header content
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop for custom styling

Note: This component extends MUI StackProps with direction="column" and spacing={2}.

ViewProduct.Sections​

Container that displays multiple information sections.

PropTypeDefaultDescription
sectionsArray<{icon?: SvgIconComponent, label: string, value: string}>From contextArray of sections to display
childrenReactNodeFrom contextCustom content to override default sections
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI StackProps with direction="column" and spacing={0}.

ViewProduct.Tags​

Container for displaying product tags.

PropTypeDefaultDescription
tagsArray<{label: string | string[]}>From contextArray of tags to display
childrenReactNodeFrom contextCustom content to override default tags
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop for custom styling

Note: This component extends MUI StackProps with direction="row" and spacing={0.5}.

ViewProduct.Content​

Container for the main product content including tags and sections.

PropTypeDefaultDescription
tagsArray<{label: string | string[]}>From contextArray of tags
sectionsArray<{icon?: SvgIconComponent, label: string, value: string}>From contextArray of sections
organizationNamestringFrom contextOrganization name
childrenReactNodeFrom contextCustom content to override default content
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI StackProps with direction="column" and spacing={2}.

ViewProduct.Actions​

Container for action buttons.

PropTypeDefaultDescription
actionsArray<{label: ReactNode, onClick: () => void}>From contextArray of action buttons
childrenReactNodeFrom contextCustom content to override default actions
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop for custom styling

Note: This component extends MUI StackProps with direction="row" and spacing={2}.

🎨 Configuration examples​

Custom Styled Components​

function StyledViewProductComponents() {
  const chips: ProductChip[] = [{label: 'New'}];
  const tags: ProductTag[] = [{label: 'Premium'}];
  const sections: ProductSection[] = [{label: 'Price', value: '$199'}];

  return (
    <ViewProduct
      organizationName="Store"
      imageUrl="/product.jpg"
      headerTitle="Product Title"
      chips={chips}
      tags={tags}
      sections={sections}
    >
      <ViewProduct.Header
        sx={{
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          borderRadius: '16px',
          padding: '24px',
          color: 'white',
        }}
      >
        <ViewProduct.CompanyName />
        <ViewProduct.Image />
        <ViewProduct.Chips />
        <ViewProduct.Title />
      </ViewProduct.Header>
      <ViewProduct.Content>
        <ViewProduct.Tags />
        <ViewProduct.Sections />
      </ViewProduct.Content>
      <ViewProduct.Actions />
    </ViewProduct>
  );
}

Block Override Pattern​

function BlockOverrideViewProduct() {
  const chips: ProductChip[] = [{label: 'Sale'}];
  const tags: ProductTag[] = [{label: 'Limited'}];
  const sections: ProductSection[] = [{label: 'Stock', value: '5 left'}];
  const actions: ProductAction[] = [{label: 'Buy Now', onClick: () => {}}];

  return (
    <ViewProduct
      organizationName="Shop"
      imageUrl="/product.jpg"
      headerTitle="Special Product"
      chips={chips}
      tags={tags}
      sections={sections}
      actions={actions}
    >
      {({defaultBlocks}) => ({
        blocks: {
          ...defaultBlocks,
          header: {
            ...defaultBlocks.header,
            props: {
              ...defaultBlocks.header.props,
              sx: {backgroundColor: '#f8fafc', borderRadius: '12px'},
            },
          },
          // Add custom banner block
          customBanner: (
            <div
              style={{
                padding: '12px 16px',
                backgroundColor: '#fef3c7',
                borderRadius: '8px',
                textAlign: 'center',
                color: '#92400e',
                fontWeight: '600',
              }}
            >
              πŸ”₯ Special Offer - 20% Off Today Only!
            </div>
          ),
        },
        blockOrder: ['header', 'customBanner', 'content', 'actions'],
      })}
    </ViewProduct>
  );
}

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {SvgIconComponent} from '@mui/icons-material';
import {ViewProduct} from '@nodeblocks/frontend-view-product-block';
import {ReactNode} from 'react';

// Chip type for product badges
interface ProductChip {
  label: string;
}

// Tag type for product categories/features
interface ProductTag {
  label: string | string[];
}

// Section type for product details
interface ProductSection {
  icon?: SvgIconComponent;
  label: string;
  value: string;
}

// Action type for buttons
interface ProductAction {
  label: ReactNode;
  onClick: () => void;
}

function TypedViewProductExample() {
  interface CustomProductData {
    id: string;
    name: string;
    price: number;
    category: string;
    brand: string;
    availability: 'in-stock' | 'out-of-stock' | 'pre-order';
    rating: number;
    features: string[];
    specifications: {
      [key: string]: string;
    };
  }

  const productData: CustomProductData = {
    id: 'PROD-2024-001',
    name: 'Premium Wireless Headphones',
    price: 299.99,
    category: 'Electronics',
    brand: 'AudioTech',
    availability: 'in-stock',
    rating: 4.8,
    features: ['Noise Cancellation', 'Bluetooth 5.0', 'Fast Charging'],
    specifications: {
      'Battery Life': '30 hours',
      'Driver Size': '40mm',
      Weight: '250g',
    },
  };

  const chips: ProductChip[] = [{label: 'Best Seller'}, {label: 'Free Shipping'}];

  const tags: ProductTag[] = [{label: `${productData.rating} Rating`}, {label: productData.features}];

  const sections: ProductSection[] = [
    {label: 'Brand', value: productData.brand},
    {label: 'Category', value: productData.category},
    {label: 'Price', value: `$${productData.price}`},
    {label: 'Availability', value: productData.availability},
    ...Object.entries(productData.specifications).map(([key, value]) => ({
      label: key,
      value: value,
    })),
  ];

  const actions: ProductAction[] = [
    {
      label: 'Add to Cart',
      onClick: () => console.log(`Added ${productData.name} to cart`),
    },
    {
      label: 'Buy Now',
      onClick: () => console.log(`Purchasing ${productData.name}`),
    },
  ];

  return (
    <ViewProduct
      organizationName="AudioTech Store"
      imageUrl="/headphones-image.jpg"
      imageAlt={productData.name}
      chips={chips}
      headerTitle={productData.name}
      tags={tags}
      sections={sections}
      actions={actions}
      className="custom-product-view"
    >
      <ViewProduct.Header />
      <ViewProduct.Content />
      <ViewProduct.Actions />
    </ViewProduct>
  );
}

πŸ“ Notes​

  • The component uses MUI's Stack component as its base, providing flexible layout options
  • All sub-components automatically receive context values from the main component
  • The tags prop supports both single strings and arrays of strings (displayed joined with " / ")
  • The sections prop accepts optional MUI SvgIconComponent icons (defaults to StickyNote2Outlined if not provided)
  • Actions render as MUI Button components with variant="contained" and size="medium"
  • Chips render as MUI Chip components with variant="outlined" and color="primary"
  • The component uses the Block Override Pattern for deep customization
  • Default blocks are: header, content, actions
  • CSS classes follow BEM-style naming: nbb-view-product, nbb-view-product-header, etc.
  • Image has default styling: maxHeight: '50vw', aspectRatio: '1368/540', objectFit: 'cover'

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