Skip to main content

List Order Block

The ListOrder Component is a fully customizable and accessible order list interface built with React and TypeScript. It provides a complete order listing experience with modern design patterns, clickable order cards, loading states, pagination support, and flexible customization options for order management applications.

πŸš€ Installation​

npm install @nodeblocks/frontend-list-order-block@0.1.1

πŸ“– Usage​

import {ListOrder} from '@nodeblocks/frontend-list-order-block';
Live Editor
function SimpleListOrder() {
  const orders = [
    {
      id: '1',
      logoUrl: 'https://placehold.co/600x400',
      title: 'Order #ORD-001',
      subtitle: '3 items - Electronics',
      date: '2024-01-15',
      status: 'delivered',
      statusLabel: 'Delivered',
    },
    {
      id: '2',
      logoUrl: 'https://placehold.co/600x400',
      title: 'Order #ORD-002',
      subtitle: '1 item - Clothing',
      date: '2024-01-14',
      status: 'processing',
      statusLabel: 'Processing',
    },
    {
      id: '3',
      logoUrl: 'https://placehold.co/600x400',
      title: 'Order #ORD-003',
      subtitle: '5 items - Home & Garden',
      date: '2024-01-13',
      status: 'shipped',
      statusLabel: 'Shipped',
    },
  ];

  return (
    <ListOrder orders={orders} hasMore={false} onClickOrder={order => console.log('Order clicked:', order.id)}>
      <ListOrder.OrderListSection />
    </ListOrder>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
ordersOrder[]RequiredArray of order objects to display
hasMorebooleanRequiredWhether there are more orders to load
onClickOrder(order: Order) => voidundefinedCallback function triggered when an order is clicked
onClickLoadMore() => voidundefinedCallback function triggered when load more button is clicked
isLoadingListbooleanundefinedWhether the list is currently loading
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedFunction to override default blocks or custom component rendering

Note: The main component inherits all HTML div element props.

Sub-Components​

The ListOrder 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.

ListOrder.OrderListSection​

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default order list rendering
classNamestringundefinedAdditional CSS class name for styling
ordersOrder[]From contextArray of orders to display
onClickOrder(order: Order) => voidFrom contextCallback function for order click events

Note: This component inherits all HTML div element props.

ListOrder.OrderCard​

PropTypeDefaultDescription
orderOrderRequiredOrder object to display
classNamestringundefinedAdditional CSS class name for styling
onClick() => voidundefinedCustom click handler for the order card
childrenReactNodeundefinedCustom content to override default card rendering

Note: This component inherits all HTML div element props.

PropTypeDefaultDescription
srcstringRequiredURL of the organization logo
altstring"Organization Logo"Alternative text for the logo image
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML img element props.

ListOrder.OrderTitle​

PropTypeDefaultDescription
childrenReactNodeRequiredTitle text for the order
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML h3 element props.

ListOrder.OrderSubtitle​

PropTypeDefaultDescription
childrenReactNodeRequiredSubtitle text for the order (typically organization name)
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML h4 element props.

ListOrder.OrderDate​

PropTypeDefaultDescription
childrenReactNodeRequiredDate text for the order
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ListOrder.OrderLoadingCircle​

PropTypeDefaultDescription
childrenReactNodeDefault loading circleCustom loading indicator content
classNamestringundefinedAdditional CSS class name for styling
widthstring"100"Width of the loading circle
heightstring"100"Height of the loading circle

Note: This component inherits all HTML svg element props.

ListOrder.LoadMoreButton​

PropTypeDefaultDescription
childrenReactNode"Read More"Button text content
classNamestringundefinedAdditional CSS class name for styling
hasMorebooleanFrom contextWhether more items are available to load
onClickLoadMore() => voidFrom contextFunction to load more orders
onClick() => voidundefinedCustom click handler for the button
disabledbooleanBased on loading stateWhether the button is disabled

Note: This component inherits all HTML button element props.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {ListOrder} from '@nodeblocks/frontend-list-order-block';
import {ComponentProps} from 'react';

// Order data interface
export type Order = {
  id: string;
  logoUrl: string;
  title: string;
  subtitle: string;
  date: string;
  status: string;
  statusLabel: string;
};

// Main component interface
interface ListOrderProps extends Omit<ComponentProps<'div'>, 'children'> {
  orders: Order[];
  hasMore: boolean;
  onClickOrder?: (order: Order) => void;
  onClickLoadMore?: () => void;
  isLoadingList?: boolean;
  className?: string;
}

// Usage example with full typing
function TypedListOrder() {
  const orderData: Order[] = [
    {
      id: 'order-1',
      logoUrl: 'https://placehold.co/600x400',
      title: 'Premium Package',
      subtitle: 'Annual subscription - 5 users',
      date: '2024-01-20',
      status: 'delivered',
      statusLabel: 'Delivered',
    },
    {
      id: 'order-2',
      logoUrl: 'https://placehold.co/600x400',
      title: 'Standard Package',
      subtitle: 'Monthly subscription - 2 users',
      date: '2024-01-19',
      status: 'processing',
      statusLabel: 'In Transit',
    },
  ];

  const handleOrderClick = (order: Order): void => {
    console.log('Order selected:', order.id, order.title);
  };

  const handleLoadMore = (): void => {
    console.log('Loading more orders...');
  };

  return (
    <ListOrder
      orders={orderData}
      hasMore={true}
      onClickOrder={handleOrderClick}
      onClickLoadMore={handleLoadMore}
      isLoadingList={false}
      style={{
        maxWidth: '800px',
        margin: '0 auto',
        padding: '24px',
        border: '1px solid #e5e7eb',
        borderRadius: '16px',
      }}
    >
      <ListOrder.OrderListSection />
      <ListOrder.LoadMoreButton />
    </ListOrder>
  );
}

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