{"_id":"@aniruddha1806/paginator","_rev":"2-180b6f6edd7c58cd6837d1596d1d1cfe","name":"@aniruddha1806/paginator","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aniruddha1806/paginator","version":"1.0.0","keywords":["react","pagination","infinite-scroll","component","ui","typescript"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/paginator@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"homepage":"https://github.com/yourusername/react-infinite-paginator#readme","bugs":{"url":"https://github.com/yourusername/react-infinite-paginator/issues"},"dist":{"shasum":"f1f8d31249b92b292eb0f42d704393cf87908f0d","tarball":"https://registry.npmjs.org/@aniruddha1806/paginator/-/paginator-1.0.0.tgz","fileCount":13,"integrity":"sha512-+jY3ZuVvogG94+FYYQVxgSWGI1HiA4ji1SwWVfbHSQh8NeW6Y7rme27yuvnsRL2W3bMBioRbndWngH6C0kWu6Q==","signatures":[{"sig":"MEUCIQDDi9mjerwlQ8FaGphgz+z/w663KYTIt4lyiJGWvUGwUAIgPy6OLvnj4FzAhTllz2wPlcfRsMloIgdnKVIRfSDJRCs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32550},"main":"dist/cjs/index.js","type":"module","types":"dist/types/index.d.ts","module":"dist/esm/index.js","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","clean":"rimraf dist","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"repository":{"url":"git+https://github.com/yourusername/react-infinite-paginator.git","type":"git"},"_npmVersion":"10.9.1","description":"A flexible React pagination component with infinite scroll support","directories":{},"sideEffects":false,"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.6.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.53.0","rimraf":"^5.0.5","rollup":"^4.3.0","typescript":"^5.2.2","@types/react":"^18.2.37","@types/react-dom":"^18.2.15","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.33.2","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.5","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/paginator_1.0.0_1744060378400_0.3448639684957422","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/paginator","version":"1.0.1","description":"A flexible React pagination component with infinite scroll support","main":"dist/cjs/index.js","type":"module","module":"dist/esm/index.js","types":"dist/types/index.d.ts","sideEffects":false,"scripts":{"build":"rollup -c","dev":"rollup -c -w","clean":"rimraf dist","prepublishOnly":"npm run clean && npm run build","test":"jest","lint":"eslint src --ext .ts,.tsx"},"keywords":["react","pagination","infinite-scroll","component","ui","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/yourusername/react-infinite-paginator.git"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"tslib":"^2.6.2"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.5","@types/react":"^18.2.37","@types/react-dom":"^18.2.15","eslint":"^8.53.0","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.0","jest":"^29.7.0","rimraf":"^5.0.5","rollup":"^4.3.0","rollup-plugin-dts":"^6.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","typescript":"^5.2.2"},"_id":"@aniruddha1806/paginator@1.0.1","bugs":{"url":"https://github.com/yourusername/react-infinite-paginator/issues"},"homepage":"https://github.com/yourusername/react-infinite-paginator#readme","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-fWvbFh6X1tDyPoobgcd33600IbPvE96CV2BJOTFDhuaoVwBCxPb5w3hhJg+iZ3XoK8qPVWttcagQOuGNQIWTjw==","shasum":"562c190df59d0612bab73832e10e31c8af0c6e0c","tarball":"https://registry.npmjs.org/@aniruddha1806/paginator/-/paginator-1.0.1.tgz","fileCount":14,"unpackedSize":44330,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFg5ZGeJr6OAYWVLGduvWO/hdJj154B9Ywx4vgJD0ZF7AiBxxhCzwi1GxpDxzqYjU100ZwCI+DP4aLMjk6dGurIcgQ=="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/paginator_1.0.1_1749139930849_0.9139667285267097"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-07T21:12:58.300Z","modified":"2025-06-05T16:12:11.208Z","1.0.0":"2025-04-07T21:12:58.608Z","1.0.1":"2025-06-05T16:12:11.041Z"},"bugs":{"url":"https://github.com/yourusername/react-infinite-paginator/issues"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","homepage":"https://github.com/yourusername/react-infinite-paginator#readme","keywords":["react","pagination","infinite-scroll","component","ui","typescript"],"repository":{"type":"git","url":"git+https://github.com/yourusername/react-infinite-paginator.git"},"description":"A flexible React pagination component with infinite scroll support","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Paginator\r\n\r\nA powerful, customizable pagination component for React applications with TypeScript support. Features traditional pagination, infinite scroll, animations, and extensive customization options.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/paginator\r\n\r\n```\r\n\r\n## Features\r\n\r\n- 📄 Traditional pagination with page numbers\r\n- 🔄 Infinite scroll support with load more functionality\r\n- 🎭 Animated transitions (slide, zoom effects)\r\n- 🎯 Jump to page functionality\r\n- 🎨 Extensive styling customization\r\n- 📱 Responsive design with ellipsis for large page ranges\r\n- 🔢 Item count and range display\r\n- ♿ Accessibility features with ARIA support\r\n- 🎛️ Customizable labels and buttons\r\n- 📝 TypeScript support with full type definitions\r\n- 🪶 Zero dependencies and lightweight\r\n\r\n## Quick Start\r\n\r\n### Basic Pagination\r\n\r\n```jsx\r\nimport Paginator from '@aniruddha1806/paginator';\r\n\r\nfunction App() {\r\n  const [currentPage, setCurrentPage] = useState(1);\r\n  const totalPages = 10;\r\n\r\n  return (\r\n    <Paginator\r\n      totalPages={totalPages}\r\n      currentPage={currentPage}\r\n      onPageChange={setCurrentPage}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n\r\n## Props\r\n\r\n### Core Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `totalPages` | `number` | `required` | Total number of pages |\r\n| `currentPage` | `number` | `required` | Current active page (1-indexed) |\r\n| `onPageChange` | `(page: number) => void` | `required` | Page change callback |\r\n| `maxVisiblePages` | `number` | `5` | Maximum visible page buttons |\r\n\r\n### Styling Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `className` | `string` | `undefined` | CSS class for container |\r\n| `buttonClassName` | `string` | `undefined` | CSS class for page buttons |\r\n| `activeButtonClassName` | `string` | `undefined` | CSS class for active button |\r\n| `disabledButtonClassName` | `string` | `undefined` | CSS class for disabled buttons |\r\n| `prevNextButtonClassName` | `string` | `undefined` | CSS class for prev/next buttons |\r\n\r\n### Label Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `prevLabel` | `React.ReactNode` | `\"Previous\"` | Previous button label |\r\n| `nextLabel` | `React.ReactNode` | `\"Next\"` | Next button label |\r\n| `firstLabel` | `React.ReactNode` | `\"First\"` | First button label |\r\n| `lastLabel` | `React.ReactNode` | `\"Last\"` | Last button label |\r\n| `showFirstLast` | `boolean` | `false` | Show first/last buttons |\r\n\r\n### Feature Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `showJumpToPage` | `boolean` | `false` | Show jump to page input |\r\n| `animateTransitions` | `boolean` | `false` | Enable page transition animations |\r\n| `animationType` | `\"slide\" \\| \"zoom\"` | `\"slide\"` | Animation type |\r\n\r\n### Infinite Scroll Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `infiniteScroll` | `boolean` | `false` | Enable infinite scroll mode |\r\n| `onLoadMore` | `() => void` | `undefined` | Load more callback |\r\n| `hasMoreItems` | `boolean` | `true` | Whether more items are available |\r\n| `loadingLabel` | `React.ReactNode` | `\"Loading more...\"` | Loading indicator text |\r\n| `itemsPerBatch` | `number` | `10` | Items loaded per batch |\r\n| `totalItems` | `number` | `undefined` | Total number of items |\r\n\r\n## Examples\r\n\r\n### Basic Pagination\r\n\r\nSimple pagination with default styling:\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport Paginator from '@aniruddha1806/paginator';\r\n\r\nfunction BasicPaginationExample() {\r\n  const [currentPage, setCurrentPage] = useState(1);\r\n  const [data, setData] = useState([]);\r\n  const itemsPerPage = 10;\r\n  const totalItems = 100;\r\n  const totalPages = Math.ceil(totalItems / itemsPerPage);\r\n\r\n  // Simulate data loading\r\n  const loadData = (page) => {\r\n    const start = (page - 1) * itemsPerPage;\r\n    const end = start + itemsPerPage;\r\n    const newData = Array.from({ length: itemsPerPage }, (_, i) => ({\r\n      id: start + i + 1,\r\n      name: `Item ${start + i + 1}`\r\n    }));\r\n    setData(newData);\r\n  };\r\n\r\n  const handlePageChange = (page) => {\r\n    setCurrentPage(page);\r\n    loadData(page);\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <div style={{ minHeight: '400px', padding: '20px' }}>\r\n        <h3>Items {((currentPage - 1) * itemsPerPage) + 1} - {Math.min(currentPage * itemsPerPage, totalItems)}</h3>\r\n        <ul>\r\n          {data.map(item => (\r\n            <li key={item.id}>{item.name}</li>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n      \r\n      <Paginator\r\n        totalPages={totalPages}\r\n        currentPage={currentPage}\r\n        onPageChange={handlePageChange}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Advanced Pagination with All Features\r\n\r\nFull-featured pagination with animations and jump functionality:\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport Paginator from '@aniruddha1806/paginator';\r\n\r\nfunction AdvancedPaginationExample() {\r\n  const [currentPage, setCurrentPage] = useState(1);\r\n  const totalPages = 20;\r\n\r\n  return (\r\n    <div style={{ padding: '20px' }}>\r\n      <h3>Advanced Pagination</h3>\r\n      \r\n      <Paginator\r\n        totalPages={totalPages}\r\n        currentPage={currentPage}\r\n        onPageChange={setCurrentPage}\r\n        maxVisiblePages={7}\r\n        showFirstLast={true}\r\n        showJumpToPage={true}\r\n        animateTransitions={true}\r\n        animationType=\"slide\"\r\n        prevLabel=\"← Prev\"\r\n        nextLabel=\"Next →\"\r\n        firstLabel=\"⇤ First\"\r\n        lastLabel=\"Last ⇥\"\r\n      />\r\n      \r\n      <div style={{ \r\n        marginTop: '20px', \r\n        padding: '16px', \r\n        backgroundColor: '#f8f9fa', \r\n        borderRadius: '8px' \r\n      }}>\r\n        <p><strong>Current Page:</strong> {currentPage}</p>\r\n        <p><strong>Total Pages:</strong> {totalPages}</p>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Custom Styled Pagination\r\n\r\nApply custom styling with CSS classes:\r\n\r\n```jsx\r\nimport Paginator from '@aniruddha1806/paginator';\r\nimport './custom-pagination.css'; // Your custom CSS\r\n\r\nfunction CustomStyledExample() {\r\n  const [currentPage, setCurrentPage] = useState(1);\r\n\r\n  return (\r\n    <Paginator\r\n      totalPages={15}\r\n      currentPage={currentPage}\r\n      onPageChange={setCurrentPage}\r\n      className=\"custom-paginator\"\r\n      buttonClassName=\"custom-button\"\r\n      activeButtonClassName=\"custom-active\"\r\n      disabledButtonClassName=\"custom-disabled\"\r\n      prevNextButtonClassName=\"custom-nav-button\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\nCSS file (custom-pagination.css):\r\n```css\r\n.custom-paginator {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 20px;\r\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n  border-radius: 12px;\r\n  box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n}\r\n\r\n.custom-button {\r\n  min-width: 40px;\r\n  height: 40px;\r\n  border-radius: 8px;\r\n  border: 2px solid rgba(255,255,255,0.3);\r\n  background: rgba(255,255,255,0.1);\r\n  color: white;\r\n  font-weight: 600;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.custom-button:hover {\r\n  background: rgba(255,255,255,0.2);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.custom-active {\r\n  background: rgba(255,255,255,0.9);\r\n  color: #667eea;\r\n  border-color: rgba(255,255,255,0.9);\r\n}\r\n\r\n.custom-disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.custom-nav-button {\r\n  padding: 0 16px;\r\n  border-radius: 20px;\r\n}\r\n```\r\n\r\n### Infinite Scroll Example\r\n\r\nImplement infinite scrolling for large datasets:\r\n\r\n```jsx\r\nimport { useState, useEffect } from 'react';\r\nimport Paginator from '@aniruddha1806/paginator';\r\n\r\nfunction InfiniteScrollExample() {\r\n  const [items, setItems] = useState([]);\r\n  const [hasMore, setHasMore] = useState(true);\r\n  const [loading, setLoading] = useState(false);\r\n\r\n  // Simulate initial data load\r\n  useEffect(() => {\r\n    loadInitialData();\r\n  }, []);\r\n\r\n  const loadInitialData = () => {\r\n    const initialItems = Array.from({ length: 20 }, (_, i) => ({\r\n      id: i + 1,\r\n      title: `Item ${i + 1}`,\r\n      description: `Description for item ${i + 1}`\r\n    }));\r\n    setItems(initialItems);\r\n  };\r\n\r\n  const loadMore = async () => {\r\n    if (loading) return;\r\n    \r\n    setLoading(true);\r\n    \r\n    // Simulate API call delay\r\n    await new Promise(resolve => setTimeout(resolve, 1000));\r\n    \r\n    const currentLength = items.length;\r\n    const newItems = Array.from({ length: 10 }, (_, i) => ({\r\n      id: currentLength + i + 1,\r\n      title: `Item ${currentLength + i + 1}`,\r\n      description: `Description for item ${currentLength + i + 1}`\r\n    }));\r\n    \r\n    setItems(prev => [...prev, ...newItems]);\r\n    setLoading(false);\r\n    \r\n    // Stop loading more after 100 items\r\n    if (items.length + newItems.length >= 100) {\r\n      setHasMore(false);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>\r\n      <h2>Infinite Scroll Example</h2>\r\n      \r\n      <div style={{ marginBottom: '20px' }}>\r\n        {items.map(item => (\r\n          <div\r\n            key={item.id}\r\n            style={{\r\n              padding: '16px',\r\n              margin: '8px 0',\r\n              border: '1px solid #e9ecef',\r\n              borderRadius: '8px',\r\n              backgroundColor: '#f8f9fa'\r\n            }}\r\n          >\r\n            <h4 style={{ margin: '0 0 8px 0' }}>{item.title}</h4>\r\n            <p style={{ margin: 0, color: '#666' }}>{item.description}</p>\r\n          </div>\r\n        ))}\r\n      </div>\r\n      \r\n      <Paginator\r\n        infiniteScroll={true}\r\n        onLoadMore={loadMore}\r\n        hasMoreItems={hasMore}\r\n        loadingLabel={loading ? \"Loading...\" : \"Load more items\"}\r\n        totalPages={0}\r\n        currentPage={1}\r\n        onPageChange={() => {}}\r\n      />\r\n      \r\n      <div style={{ \r\n        textAlign: 'center', \r\n        marginTop: '20px', \r\n        color: '#666',\r\n        fontSize: '14px'\r\n      }}>\r\n        Loaded {items.length} items\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport Paginator, { PaginatorProps } from '@aniruddha1806/paginator';\r\nimport { useState, useCallback } from 'react';\r\n\r\ninterface PaginatedData<T> {\r\n  items: T[];\r\n  totalPages: number;\r\n  currentPage: number;\r\n  totalItems: number;\r\n}\r\n\r\ninterface User {\r\n  id: number;\r\n  name: string;\r\n  email: string;\r\n}\r\n\r\nconst PaginatedUserList: React.FC = () => {\r\n  const [paginatedData, setPaginatedData] = useState<PaginatedData<User>>({\r\n    items: [],\r\n    totalPages: 0,\r\n    currentPage: 1,\r\n    totalItems: 0\r\n  });\r\n\r\n  const handlePageChange = useCallback((page: number): void => {\r\n    // Fetch data for the new page\r\n    fetchUsersForPage(page);\r\n  }, []);\r\n\r\n  const fetchUsersForPage = async (page: number): Promise<void> => {\r\n    try {\r\n      const response = await fetch(`/api/users?page=${page}`);\r\n      const data = await response.json();\r\n      setPaginatedData(data);\r\n    } catch (error) {\r\n      console.error('Error fetching users:', error);\r\n    }\r\n  };\r\n\r\n  const paginatorProps: PaginatorProps = {\r\n    totalPages: paginatedData.totalPages,\r\n    currentPage: paginatedData.currentPage,\r\n    onPageChange: handlePageChange,\r\n    maxVisiblePages: 7,\r\n    showJumpToPage: true,\r\n    animateTransitions: true,\r\n    totalItems: paginatedData.totalItems,\r\n    itemsPerBatch: 10\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <div>\r\n        {paginatedData.items.map(user => (\r\n          <div key={user.id}>\r\n            <h3>{user.name}</h3>\r\n            <p>{user.email}</p>\r\n          </div>\r\n        ))}\r\n      </div>\r\n      <Paginator {...paginatorProps} />\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}