Skip to main content

List Invites Block

The ListInvites Component is a fully customizable and accessible invite management interface built with React and TypeScript. It provides a complete tabular invite listing experience with modern design patterns, action dropdowns, pagination support, loading states, and flexible customization options for advanced invite management applications.

🚀 Installation​

npm install @nodeblocks/frontend-list-invites-block

📖 Usage​

import {ListInvites} from '@nodeblocks/frontend-list-invites-block';
Live Editor
function BasicListInvites() {
  const [isLoading, setIsLoading] = useState(false);

  const inviteData = [
    {
      id: '1',
      name: 'John Doe',
      email: 'john.doe@example.com',
      status: 'pending'
    },
    {
      id: '2',
      name: 'Jane Smith',
      email: 'jane.smith@example.com',
      status: 'accepted'
    },
    {
      id: '3',
      name: 'Bob Johnson',
      email: 'bob.johnson@example.com',
      status: 'expired'
    }
  ];

  const labels = {
    emptyStateMessage: 'No invites found',
    actions: {
      inviteUser: 'Invite User'
    },
    headerRow: {
      name: 'Name',
      email: 'Email',
      status: 'Status'
    },
    rowActions: {
      reject: 'Reject Invite'
    },
    unsetDateMessage: 'No date set'
  };

  const handleItemReject = (inviteId) => {
    console.log('Reject invite:', inviteId);
  };

  const handleClickAction = () => {
    console.log('Invite user clicked');
  };

  const handleNavigate = (path) => {
    console.log('Navigate to:', path);
  };

  const getRowHref = (row) => `/invites/${row.id}`;

  return (
    <ListInvites
      listInvitesTitle="Manage Invites"
      labels={labels}
      isLoading={isLoading}
      onNavigate={handleNavigate}
      onClickAction={handleClickAction}
      onItemReject={handleItemReject}
      data={inviteData}
      rowHref={getRowHref}>
      <ListInvites.Header style={{display: 'flex', justifyContent: 'space-between', padding: '16px'}}>
        <ListInvites.Title />
        <ListInvites.Action />
      </ListInvites.Header>
      <ListInvites.Content>
        {isLoading ? (
          <ListInvites.Loader />
        ) : (
          <ListInvites.Table />
        )}
      </ListInvites.Content>
    </ListInvites>
  );
}
Result
Loading...

🔧 Props Reference​

Main Component Props​

PropTypeDefaultDescription
listInvitesTitleReactNodeRequiredTitle for the invites section
labelsTableLabelsRequiredLabels object for table headers, actions, and messages
isLoadingbooleanundefinedWhether the table is currently loading
onNavigate(to: string) => voidRequiredCallback function for navigation
onClickAction() => voidRequiredCallback function for the main action button
onItemReject(inviteId: string) => voidRequiredCallback function when invite is rejected
dataListInvitesRowData[]RequiredArray of invite data objects
rowHref(row: ListInvitesRowData) => stringRequiredFunction to generate row link URLs
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}From contextPagination configuration
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all HTML div element props.

Sub-Components​

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

ListInvites.Header​

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default header rendering
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ListInvites.Title​

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default title rendering
sizeenum"3XL"Typography size for the title
weightenum"bold"Typography weight
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML span element props.

ListInvites.Action​

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default action rendering
directionenum"row"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

ListInvites.Content​

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default content rendering
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ListInvites.Loader​

PropTypeDefaultDescription
childrenReactNodeCircular progress indicatorCustom loading indicator content
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ListInvites.Table​

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS class name for styling
dataListInvitesRowData[]From contextArray of table data
labelsTableLabelsRequiredLabels object for table headers, actions, and messages
dropdownMenuItems(cell: ListInvitesRowData) => Array<DropDownMenuItems>From contextFunction to generate dropdown menu items
dropdownMenuState{openedDropdownMenuId: string}From contextCurrently opened dropdown menu
setDropdownMenuState({openedDropdownMenuId: string}) => voidFrom contextCallback function when the opened dropdown menu changes
emptyState{icon?: IconType; message: string}From contextConfiguration for empty state
isLoadingbooleanFrom contextLoading state
onNavigate(to: string) => voidFrom contextNavigation callback function
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}From contextPagination configuration
rowHref`(cell: ListInvitesRowData) => stringundefinednull`

🔧 TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {ListInvites} from '@nodeblocks/frontend-list-invites-block';

interface ListInvitesRowData {
  id: string;
  name: string;
  email: string;
  status: string;
}

interface CustomInviteTableProps {
  invites: ListInvitesRowData[];
  onRejectInvite: (inviteId: string) => void;
  onInviteUser: () => void;
  isTableLoading: boolean;
}

interface TableLabels {
  emptyStateMessage: string;
  actions: {
    inviteUser: string;
  };
  headerRow: {
    name: string;
    email: string;
    status: string;
  };
  rowActions: {
    reject: string;
  };
  unsetDateMessage: string;
}

const InviteTableComponent = ({invites, onRejectInvite, onInviteUser, isTableLoading}: CustomInviteTableProps) => {
  const tableLabels: TableLabels = {
    emptyStateMessage: 'No invites available',
    actions: {inviteUser: 'Send Invite'},
    headerRow: {
      name: 'Full Name',
      email: 'Email Address',
      status: 'Invite Status',
    },
    rowActions: {
      reject: 'Reject Invitation',
    },
    unsetDateMessage: 'Date not set',
  };

  return (
    <ListInvites
      listInvitesTitle="Team Invitations"
      labels={tableLabels}
      isLoading={isTableLoading}
      onNavigate={path => console.log('Navigate:', path)}
      onClickAction={onInviteUser}
      onItemReject={onRejectInvite}
      data={invites}
      rowHref={row => `/invites/${row.id}`}>
      <ListInvites.Header />
      <ListInvites.Content />
    </ListInvites>
  );
};

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