{"_id":"@ant-design/x-card","_rev":"7-18c58112959fe14d113916d66d80d1a8","name":"@ant-design/x-card","dist-tags":{"beta":"2.7.0","latest":"2.9.0"},"versions":{"2.5.0":{"name":"@ant-design/x-card","version":"2.5.0","keywords":["A2UI","loader","react","ant-design"],"license":"MIT","_id":"@ant-design/x-card@2.5.0","maintainers":[{"name":"blueboylijian","email":"onlyyoulove3@gmail.com"},{"name":"afc163","email":"afc163@gmail.com"},{"name":"zombiej","email":"smith3816@gmail.com"},{"name":"yumoimer","email":"yumo.imer@gmail.com"},{"name":"lijianan","email":"574980606@qq.com"},{"name":"mickey_fanlu","email":"951203214@qq.com"}],"homepage":"https://x.ant.design/x-card","bugs":{"url":"https://github.com/ant-design/x/issues"},"dist":{"shasum":"423c0f65a7cdb4b04c7b21fb6f02994bc4f58cd3","tarball":"https://registry.npmjs.org/@ant-design/x-card/-/x-card-2.5.0.tgz","fileCount":62,"integrity":"sha512-un8BTX8YPPJaF5eIY8k+cG1UevAWCTEdXbjwQqk15IQqf+JZJk1D4VjyONarCrljXsRYCjLhYQmlXV9fv59bVQ==","signatures":[{"sig":"MEYCIQCo0NtceslzdhsS+xUO9l7CtL3JBKVg2A3DjrGkYiESHwIhAMw6KAQ6eMKTyTkU75xqBST365FrWCMbtN3elom2K4dK","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":295037},"main":"lib/index.js","module":"es/index.js","gitHead":"9c284f362743b79556d97065f1e294134c6c0543","scripts":{"tsc":"tsc --noEmit","lint":"npm run version && npm run tsc && npm run lint:script && npm run lint:md","test":"jest --config .jest.js --no-cache --collect-coverage","clean":"rm -rf es lib coverage dist","compile":"father build","lint:md":"remark . -f -q","predist":"npm run prestart","pretest":"npm run prestart","version":"tsx scripts/generate-version.ts","coverage":"jest --config .jest.js --no-cache --collect-coverage --coverage","prestart":"npm run version","precompile":"npm run prestart","test:dekko":"tsx ./tests/dekko/index.test.ts","lint:script":"biome lint","prepublishOnly":"tsx ../../scripts/pre-publish.ts x-card","test:package-diff":"antd-tools run package-diff"},"typings":"es/index.d.ts","_npmUser":{"name":"mickey_fanlu","email":"951203214@qq.com"},"repository":{"url":"git+https://github.com/ant-design/x.git","type":"git"},"_npmVersion":"10.9.4","description":"React card loader for dynamic content loading and management","directories":{},"sideEffects":false,"_nodeVersion":"22.21.1","dependencies":{"rc-util":"^5.43.0","classnames":"^2.5.1","@babel/runtime":"^7.25.6","@ant-design/icons":"^6.0.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@types/react":"^19.0.2","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/x-card_2.5.0_1774929461477_0.8356999402994489","host":"s3://npm-registry-packages-npm-production"}},"2.6.0":{"name":"@ant-design/x-card","version":"2.6.0","keywords":["A2UI","loader","react","ant-design"],"license":"MIT","_id":"@ant-design/x-card@2.6.0","maintainers":[{"name":"blueboylijian","email":"onlyyoulove3@gmail.com"},{"name":"afc163","email":"afc163@gmail.com"},{"name":"zombiej","email":"smith3816@gmail.com"},{"name":"yumoimer","email":"yumo.imer@gmail.com"},{"name":"lijianan","email":"574980606@qq.com"},{"name":"mickey_fanlu","email":"951203214@qq.com"}],"homepage":"https://x.ant.design/x-card","bugs":{"url":"https://github.com/ant-design/x/issues"},"dist":{"shasum":"8f55931a3c72d329c2b203fcf1376a75a6332ae7","tarball":"https://registry.npmjs.org/@ant-design/x-card/-/x-card-2.6.0.tgz","fileCount":62,"integrity":"sha512-wR2EyPtOimO6X1D9UxUd0sTuqB4K8A5klNfHUQy3zpeKnn33d5EddJFEZJW+eimrfrjF9IqrWOnikdbHPy+TdA==","signatures":[{"sig":"MEUCIGoHuZv9OX9hH39akseu/CZB1PRZprP7gAg5mG6nrR2uAiEAqQNIGAofq16GfR60Ysb+PrRPnpx42oIluOMU/RNGV28=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":295037},"main":"lib/index.js","module":"es/index.js","gitHead":"f320d87543baf49912910689794b601ce873e4cb","scripts":{"tsc":"tsc --noEmit","lint":"npm run version && npm run tsc && npm run lint:script && npm run lint:md","test":"jest --config .jest.js --no-cache --collect-coverage","clean":"rm -rf es lib coverage dist","compile":"father build","lint:md":"remark . -f -q","predist":"npm run prestart","pretest":"npm run prestart","version":"tsx scripts/generate-version.ts","coverage":"jest --config .jest.js --no-cache --collect-coverage --coverage","prestart":"npm run version","precompile":"npm run prestart","test:dekko":"tsx ./tests/dekko/index.test.ts","lint:script":"biome lint","prepublishOnly":"tsx ../../scripts/pre-publish.ts x-card","test:package-diff":"antd-tools run package-diff"},"typings":"es/index.d.ts","_npmUser":{"name":"mickey_fanlu","email":"951203214@qq.com"},"repository":{"url":"git+https://github.com/ant-design/x.git","type":"git"},"_npmVersion":"10.9.4","description":"React card loader for dynamic content loading and management","directories":{},"sideEffects":false,"_nodeVersion":"22.21.1","dependencies":{"rc-util":"^5.43.0","classnames":"^2.5.1","@babel/runtime":"^7.25.6","@ant-design/icons":"^6.0.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@types/react":"^19.0.2","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/x-card_2.6.0_1776420828841_0.6458150307962218","host":"s3://npm-registry-packages-npm-production"}},"2.7.0":{"name":"@ant-design/x-card","version":"2.7.0","keywords":["A2UI","loader","react","ant-design"],"license":"MIT","_id":"@ant-design/x-card@2.7.0","maintainers":[{"name":"blueboylijian","email":"onlyyoulove3@gmail.com"},{"name":"afc163","email":"afc163@gmail.com"},{"name":"zombiej","email":"smith3816@gmail.com"},{"name":"yumoimer","email":"yumo.imer@gmail.com"},{"name":"lijianan","email":"574980606@qq.com"},{"name":"mickey_fanlu","email":"951203214@qq.com"}],"homepage":"https://x.ant.design/x-card","bugs":{"url":"https://github.com/ant-design/x/issues"},"dist":{"shasum":"85325b94feda3fe79a0adcf03a82b5abefcdef72","tarball":"https://registry.npmjs.org/@ant-design/x-card/-/x-card-2.7.0.tgz","fileCount":62,"integrity":"sha512-9EIILrnvSNrLk6oLS2yrNC0QiYt+JMubUPFS+xbpXn/uW0Km5Gpk/nSiK3cetJOqq31F2bpPJAHD3r4dGWj9mQ==","signatures":[{"sig":"MEYCIQDGD+NioJCUwdIxesmnotRYe/4Bo+EZu+leZbuAZEjwgAIhAIYCFytozqs5HnZtjqIALz80E69KE1HX7fgdvPbAIiBF","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":319514},"main":"lib/index.js","module":"es/index.js","gitHead":"9108580ab01add41fa11b8afea911eba5cc30d57","scripts":{"tsc":"tsc --noEmit","lint":"npm run version && npm run tsc && npm run lint:script && npm run lint:md","test":"jest --config .jest.js --no-cache --collect-coverage","clean":"rm -rf es lib coverage dist","compile":"father build","lint:md":"remark . -f -q","predist":"npm run prestart","pretest":"npm run prestart","version":"tsx scripts/generate-version.ts","coverage":"jest --config .jest.js --no-cache --collect-coverage --coverage","prestart":"npm run version","precompile":"npm run prestart","test:dekko":"tsx ./tests/dekko/index.test.ts","lint:script":"biome lint","prepublishOnly":"tsx ../../scripts/pre-publish.ts x-card","test:package-diff":"antd-tools run package-diff"},"typings":"es/index.d.ts","_npmUser":{"name":"mickey_fanlu","email":"951203214@qq.com"},"repository":{"url":"git+https://github.com/ant-design/x.git","type":"git"},"_npmVersion":"10.9.4","description":"React card loader for dynamic content loading and management","directories":{},"sideEffects":false,"_nodeVersion":"22.21.1","dependencies":{"rc-util":"^5.43.0","classnames":"^2.5.1","@babel/runtime":"^7.25.6","@ant-design/icons":"^6.0.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@types/react":"^19.0.2","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/x-card_2.7.0_1777516747673_0.24015204934990653","host":"s3://npm-registry-packages-npm-production"}},"2.8.0":{"name":"@ant-design/x-card","version":"2.8.0","keywords":["A2UI","loader","react","ant-design"],"license":"MIT","_id":"@ant-design/x-card@2.8.0","maintainers":[{"name":"blueboylijian","email":"onlyyoulove3@gmail.com"},{"name":"afc163","email":"afc163@gmail.com"},{"name":"zombiej","email":"smith3816@gmail.com"},{"name":"yumoimer","email":"yumo.imer@gmail.com"},{"name":"lijianan","email":"574980606@qq.com"},{"name":"div627_","email":"yangchen.cycn@gmail.com"},{"name":"mickey_fanlu","email":"951203214@qq.com"}],"homepage":"https://x.ant.design/x-card","bugs":{"url":"https://github.com/ant-design/x/issues"},"dist":{"shasum":"ccd577096d65fcc177c503154c1beb8812e4623e","tarball":"https://registry.npmjs.org/@ant-design/x-card/-/x-card-2.8.0.tgz","fileCount":62,"integrity":"sha512-FoN+MFhNsnCPJRqTHqDaogbnPhSTCeziBxqwq3I2v5WRPwy6o0VSb6mfkOLzeYm2Co1bfhdLxlrcOWQyhoQoHw==","signatures":[{"sig":"MEYCIQCzlNRCZRdj8dDMp6Uy6kkOG0bxpPRmGDaOKIGn0Z/lXwIhAJh+6MXE+g+92qCrWnsDdCW7j/LKcmXY+cLMgTivsKTb","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":319433},"main":"lib/index.js","module":"es/index.js","gitHead":"6ed809e420fa6f4d9b1553fe4a2ab6ef3299a551","scripts":{"tsc":"tsc --noEmit","lint":"npm run version && npm run tsc && npm run lint:script && npm run lint:md","test":"jest --config .jest.js --no-cache --collect-coverage","clean":"rm -rf es lib coverage dist","compile":"father build","lint:md":"remark . -f -q","predist":"npm run prestart","pretest":"npm run prestart","version":"tsx scripts/generate-version.ts","coverage":"jest --config .jest.js --no-cache --collect-coverage --coverage","prestart":"npm run version","precompile":"npm run prestart","test:dekko":"tsx ./tests/dekko/index.test.ts","lint:script":"biome lint","prepublishOnly":"tsx ../../scripts/pre-publish.ts x-card","test:package-diff":"antd-tools run package-diff"},"typings":"es/index.d.ts","_npmUser":{"name":"mickey_fanlu","email":"951203214@qq.com"},"repository":{"url":"git+https://github.com/ant-design/x.git","type":"git"},"_npmVersion":"10.9.4","description":"React card loader for dynamic content loading and management","directories":{},"sideEffects":false,"_nodeVersion":"22.21.1","dependencies":{"rc-util":"^5.43.0","classnames":"^2.5.1","@babel/runtime":"^7.25.6","@ant-design/icons":"^6.0.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@types/react":"^19.0.2","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/x-card_2.8.0_1780918846347_0.9774414587759048","host":"s3://npm-registry-packages-npm-production"}},"2.9.0":{"name":"@ant-design/x-card","version":"2.9.0","description":"React card loader for dynamic content loading and management","keywords":["A2UI","loader","react","ant-design"],"homepage":"https://x.ant.design/x-card","bugs":{"url":"https://github.com/ant-design/x/issues"},"repository":{"type":"git","url":"git+https://github.com/ant-design/x.git"},"license":"MIT","sideEffects":false,"main":"lib/index.js","module":"es/index.js","typings":"es/index.d.ts","scripts":{"compile":"father build","prepublishOnly":"tsx ../../scripts/pre-publish.ts x-card","tsc":"tsc --noEmit","lint":"npm run version && npm run tsc && npm run lint:script && npm run lint:md","lint:md":"remark . -f -q","predist":"npm run prestart","prestart":"npm run version","pretest":"npm run prestart","precompile":"npm run prestart","lint:script":"biome lint","test":"jest --config .jest.js --no-cache --collect-coverage","coverage":"jest --config .jest.js --no-cache --collect-coverage --coverage","version":"tsx scripts/generate-version.ts","test:dekko":"tsx ./tests/dekko/index.test.ts","clean":"rm -rf es lib coverage dist","test:package-diff":"antd-tools run package-diff"},"dependencies":{"@ant-design/icons":"^6.0.0","@babel/runtime":"^7.25.6","classnames":"^2.5.1","rc-util":"^5.43.0"},"devDependencies":{"@types/react":"^19.0.2","@types/react-dom":"^19.0.2","react":"^19.0.0","react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_id":"@ant-design/x-card@2.9.0","gitHead":"13afbf4e6434347832d2725cc531a5128b98094e","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-DaLDxsF5Z06GjuSb3jmu3coqVRwqlYD+BPWO3MxYWdwySGTVMsTMZZZ3Na75vwyn/tWsAx7sgJGxjnX+W9dn3g==","shasum":"97ec98d37ee9a26040c38f3718a0ed766b49d78a","tarball":"https://registry.npmjs.org/@ant-design/x-card/-/x-card-2.9.0.tgz","fileCount":62,"unpackedSize":319433,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC9CkQY+mxNshCgOeVLft22neL4tfGOaSky0s+XRB18nQIgcgjMPg3L3lQ1N2nLtoXnK5Y/g/TE9ri5xsuuoGY9utQ="}]},"_npmUser":{"name":"mickey_fanlu","email":"951203214@qq.com"},"directories":{},"maintainers":[{"name":"blueboylijian","email":"onlyyoulove3@gmail.com"},{"name":"afc163","email":"afc163@gmail.com"},{"name":"zombiej","email":"smith3816@gmail.com"},{"name":"yumoimer","email":"yumo.imer@gmail.com"},{"name":"lijianan","email":"574980606@qq.com"},{"name":"div627_","email":"yangchen.cycn@gmail.com"},{"name":"mickey_fanlu","email":"951203214@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/x-card_2.9.0_1785205932960_0.7030475206746323"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-31T03:57:41.350Z","modified":"2026-07-28T02:32:13.425Z","2.5.0":"2026-03-31T03:57:41.627Z","2.6.0":"2026-04-17T10:13:48.978Z","2.7.0":"2026-04-30T02:39:07.831Z","2.8.0":"2026-06-08T11:40:46.485Z","2.9.0":"2026-07-28T02:32:13.188Z"},"bugs":{"url":"https://github.com/ant-design/x/issues"},"license":"MIT","homepage":"https://x.ant.design/x-card","keywords":["A2UI","loader","react","ant-design"],"repository":{"type":"git","url":"git+https://github.com/ant-design/x.git"},"description":"React card loader for dynamic content loading and management","maintainers":[{"name":"blueboylijian","email":"onlyyoulove3@gmail.com"},{"name":"afc163","email":"afc163@gmail.com"},{"name":"zombiej","email":"smith3816@gmail.com"},{"name":"yumoimer","email":"yumo.imer@gmail.com"},{"name":"lijianan","email":"574980606@qq.com"},{"name":"div627_","email":"yangchen.cycn@gmail.com"},{"name":"mickey_fanlu","email":"951203214@qq.com"}],"readme":"# @ant-design/x-card\n\nReact card loader for dynamic content loading and management.\n\n## Features\n\n- 🚀 **Dynamic Loading**: Load cards asynchronously with configurable concurrency\n- 🔄 **Retry Mechanism**: Automatic retry with exponential backoff\n- ⚡ **Performance**: Optimized for large datasets with virtual scrolling support\n- 🎨 **Customizable**: Fully customizable card rendering and loading states\n- 📱 **Responsive**: Mobile-friendly responsive design\n- 🔧 **TypeScript**: Full TypeScript support\n\n## Installation\n\n```bash\nnpm install @ant-design/x-card\n# or\nyarn add @ant-design/x-card\n# or\npnpm add @ant-design/x-card\n```\n\n## Usage\n\n### Basic Usage\n\n```tsx\nimport React from 'react';\nimport { CardLoader } from '@ant-design/x-card';\n\nconst App = () => {\n  const cards = [\n    {\n      id: '1',\n      title: 'Card 1',\n      content: 'This is card content',\n    },\n    {\n      id: '2',\n      title: 'Card 2',\n      content: 'Another card content',\n    },\n  ];\n\n  return <CardLoader cards={cards} />;\n};\n```\n\n### Advanced Usage\n\n```tsx\nimport React from 'react';\nimport { CardLoader, useCardLoader } from '@ant-design/x-card';\n\nconst App = () => {\n  const { state, actions } = useCardLoader({\n    config: {\n      maxConcurrent: 5,\n      retryCount: 3,\n      timeout: 10000,\n    },\n    customLoader: async (card) => {\n      // Custom loading logic\n      const response = await fetch(`/api/cards/${card.id}`);\n      const data = await response.json();\n      return data.content;\n    },\n  });\n\n  React.useEffect(() => {\n    actions.loadCards([\n      { id: '1', title: 'Dynamic Card 1' },\n      { id: '2', title: 'Dynamic Card 2' },\n    ]);\n  }, []);\n\n  return (\n    <CardLoader\n      cards={state.cards}\n      renderLoading={(card) => <div>Loading {card.title}...</div>}\n      renderError={(error, card) => <div>Error: {error.message}</div>}\n    />\n  );\n};\n```\n\n### Using Hooks\n\n```tsx\nimport React from 'react';\nimport { useCardLoader } from '@ant-design/x-card';\n\nconst App = () => {\n  const { state, actions } = useCardLoader();\n\n  const addNewCard = () => {\n    actions.addCard({\n      id: Date.now().toString(),\n      title: 'New Card',\n      content: 'Dynamic content',\n    });\n  };\n\n  return (\n    <div>\n      <button onClick={addNewCard}>Add Card</button>\n      {state.cards.map((card) => (\n        <div key={card.id}>\n          <h3>{card.title}</h3>\n          <p>{card.content}</p>\n        </div>\n      ))}\n    </div>\n  );\n};\n```\n\n## API\n\n### CardLoader Props\n\n| Property         | Type               | Default | Description                   |\n| ---------------- | ------------------ | ------- | ----------------------------- |\n| cards            | CardLoaderConfig[] | []      | Array of card configurations  |\n| config           | CardLoaderConfig   | -       | Loader configuration          |\n| customLoader     | function           | -       | Custom card loading function  |\n| renderEmpty      | function           | -       | Custom empty state renderer   |\n| renderLoading    | function           | -       | Custom loading state renderer |\n| renderError      | function           | -       | Custom error state renderer   |\n| onLoadingChange  | function           | -       | Loading state change callback |\n| onCardLoad       | function           | -       | Card load success callback    |\n| onCardError      | function           | -       | Card load error callback      |\n| onAllCardsLoaded | function           | -       | All cards loaded callback     |\n\n### CardLoaderConfig\n\n| Property | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | - | Unique card identifier |\n| title | string | - | Card title |\n| content | ReactNode | - | Card content |\n| type | 'default' \\| 'info' \\| 'success' \\| 'warning' \\| 'error' | 'default' | Card type |\n| loading | boolean | false | Loading state |\n| closable | boolean | false | Whether card can be closed |\n| size | 'small' \\| 'middle' \\| 'large' | 'middle' | Card size |\n| disabled | boolean | false | Whether card is disabled |\n| className | string | - | Custom CSS class |\n| style | CSSProperties | - | Custom inline style |\n| extra | ReactNode | - | Extra content in card header |\n\n### useCardLoader Hook\n\nReturns an object with:\n\n- `state`: Current loader state\n- `actions`: Available actions\n  - `addCard(card)`: Add a new card\n  - `removeCard(id)`: Remove a card\n  - `updateCard(id, updates)`: Update a card\n  - `reloadCard(id)`: Reload a card\n  - `clearCards()`: Clear all cards\n  - `getCardState(id)`: Get card state\n  - `loadCards(cards)`: Load multiple cards\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development\nnpm run start\n\n# Run tests\nnpm test\n\n# Build\nnpm run compile\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}