{"library":"rc-pagination","title":"React Pagination Component","description":"rc-pagination is a highly customizable and flexible React UI component for building pagination controls. While version 5.1.0 is the current stable release under this package name, the project has formally transitioned and is actively maintained as the `@rc-component/pagination` package. This library is renowned for its extensive API, offering deep customization options for appearance and behavior, including support for internationalization, quick page jumpers, page size changers, and custom renderers for individual page items. It serves as the foundational pagination logic for prominent UI libraries such as Ant Design, emphasizing accessibility and performance. Developers initiating new projects or upgrading should use `@rc-component/pagination` for the latest features and ongoing support, as `rc-pagination` is effectively superseded by the renamed package.","language":"javascript","status":"renamed","last_verified":"Tue Apr 21","install":{"commands":["npm install rc-pagination"],"cli":null},"imports":["import Pagination from 'rc-pagination';","import type { PaginationProps } from 'rc-pagination';","import 'rc-pagination/assets/index.css';","const Pagination = require('rc-pagination');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Pagination from 'rc-pagination';\nimport type { PaginationProps } from 'rc-pagination';\nimport 'rc-pagination/assets/index.css'; // Don't forget to import styles!\n\nfunction App() {\n  const [current, setCurrent] = useState(1);\n  const totalItems = 100;\n  const pageSize = 10;\n\n  const onChange: PaginationProps['onChange'] = (page, pageSize) => {\n    console.log(`Page: ${page}, PageSize: ${pageSize}`);\n    setCurrent(page);\n  };\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>rc-pagination Example</h1>\n      <Pagination\n        onChange={onChange}\n        current={current}\n        total={totalItems}\n        pageSize={pageSize}\n        showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}\n        showSizeChanger\n        pageSizeOptions={['10', '20', '30']}\n        showQuickJumper={{ goButton: true }}\n        locale={{ jump_to: 'Go to', page: 'Page' }}\n      />\n      <p>Current Page: {current}</p>\n      <p>Total Items: {totalItems}</p>\n    </div>\n  );\n}\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = ReactDOM.createRoot(container);\n  root.render(<App />);\n} else {\n  console.error(\"Root element not found. Please ensure an element with id 'root' exists in your HTML.\");\n}","lang":"typescript","description":"This quickstart demonstrates a basic functional React component using `rc-pagination`, managing page state, and showcasing common features like total display, size changer, and quick jumper. It includes the necessary CSS import and uses modern ReactDOM rendering.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}