@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

CardLoaderConfig

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