@ant-design/x-card

React card loader for dynamic content loading and management.

Features

• 🚀 Dynamic Loading: Load cards asynchronously with configurable concurrency
• 🔄 Retry Mechanism: Automatic retry with exponential backoff
• ⚡ Performance: Optimized for large datasets with virtual scrolling support
• 🎨 Customizable: Fully customizable card rendering and loading states
• 📱 Responsive: Mobile-friendly responsive design
• 🔧 TypeScript: Full TypeScript support

Installation

npm install @ant-design/x-card
# or
yarn add @ant-design/x-card
# or
pnpm add @ant-design/x-card

Usage

Basic Usage

import React from 'react';
import { CardLoader } from '@ant-design/x-card';

const App = () => {
  const cards = [
    {
      id: '1',
      title: 'Card 1',
      content: 'This is card content',
    },
    {
      id: '2',
      title: 'Card 2',
      content: 'Another card content',
    },
  ];

  return <CardLoader cards={cards} />;
};

Advanced Usage

import React from 'react';
import { CardLoader, useCardLoader } from '@ant-design/x-card';

const App = () => {
  const { state, actions } = useCardLoader({
    config: {
      maxConcurrent: 5,
      retryCount: 3,
      timeout: 10000,
    },
    customLoader: async (card) => {
      // Custom loading logic
      const response = await fetch(`/api/cards/${card.id}`);
      const data = await response.json();
      return data.content;
    },
  });

  React.useEffect(() => {
    actions.loadCards([
      { id: '1', title: 'Dynamic Card 1' },
      { id: '2', title: 'Dynamic Card 2' },
    ]);
  }, []);

  return (
    <CardLoader
      cards={state.cards}
      renderLoading={(card) => <div>Loading {card.title}...</div>}
      renderError={(error, card) => <div>Error: {error.message}</div>}
    />
  );
};

Using Hooks

import React from 'react';
import { useCardLoader } from '@ant-design/x-card';

const App = () => {
  const { state, actions } = useCardLoader();

  const addNewCard = () => {
    actions.addCard({
      id: Date.now().toString(),
      title: 'New Card',
      content: 'Dynamic content',
    });
  };

  return (
    <div>
      <button onClick={addNewCard}>Add Card</button>
      {state.cards.map((card) => (
        <div key={card.id}>
          <h3>{card.title}</h3>
          <p>{card.content}</p>
        </div>
      ))}
    </div>
  );
};

API

CardLoader Props

Property	Type	Default	Description
cards	CardLoaderConfig[]	[]	Array of card configurations
config	CardLoaderConfig	-	Loader configuration
customLoader	function	-	Custom card loading function
renderEmpty	function	-	Custom empty state renderer
renderLoading	function	-	Custom loading state renderer
renderError	function	-	Custom error state renderer
onLoadingChange	function	-	Loading state change callback
onCardLoad	function	-	Card load success callback
onCardError	function	-	Card load error callback
onAllCardsLoaded	function	-	All cards loaded callback

CardLoaderConfig

Property	Type	Default	Description
id	string	-	Unique card identifier
title	string	-	Card title
content	ReactNode	-	Card content
type	'default' | 'info' | 'success' | 'warning' | 'error'	'default'	Card type
loading	boolean	false	Loading state
closable	boolean	false	Whether card can be closed
size	'small' | 'middle' | 'large'	'middle'	Card size
disabled	boolean	false	Whether card is disabled
className	string	-	Custom CSS class
style	CSSProperties	-	Custom inline style
extra	ReactNode	-	Extra content in card header

useCardLoader Hook

Returns an object with:

• state: Current loader state
• actions: Available actions
  • addCard(card): Add a new card
  • removeCard(id): Remove a card
  • updateCard(id, updates): Update a card
  • reloadCard(id): Reload a card
  • clearCards(): Clear all cards
  • getCardState(id): Get card state
  • loadCards(cards): Load multiple cards

Development

# Install dependencies
npm install

# Start development
npm run start

# Run tests
npm test

# Build
npm run compile

License

MIT