Skip to content

README.md

Latest commit

 

History

History
184 lines (149 loc) · 4.62 KB

README.md

File metadata and controls

184 lines (149 loc) · 4.62 KB

@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