# PaginationNumberField
## Description
A specialized number input component designed for pagination controls. Allows users to directly enter a page number for quick navigation, with built-in validation, bounds checking, and integration with pagination state management.
## Aliases
- PaginationNumberField
- PageNumberInput
- PageJumpField
- PageInput
- NavigationNumberField
## Props Breakdown
**Extends:** Standalone interface (no HTML element inheritance)
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | - | No | Additional CSS class names for custom styling |
| `page` | `number` | - | No | Current page number value |
| `totalPages` | `number` | - | No | Maximum page number allowed |
| `onPageChanged` | `(page: number) => void` | - | No | Callback function when page number changes |
## Examples
### Basic Usage
```tsx
import { PaginationNumberField } from '@delightui/components';
function BasicExample() {
const [currentPage, setCurrentPage] = useState(1);
const totalPages = 10;
return (
Go to page:
of {totalPages}
);
}
```
### Integrated with Pagination
```tsx
function IntegratedPaginationExample() {
const [currentPage, setCurrentPage] = useState(1);
const totalPages = 25;
const totalItems = 247;
const itemsPerPage = 10;
const startItem = (currentPage - 1) * itemsPerPage + 1;
const endItem = Math.min(currentPage * itemsPerPage, totalItems);
return (
Page {currentPage} Content
Showing items {startItem}-{endItem} of {totalItems}
);
}
```
### Search Results with Page Jump
```tsx
function SearchResultsExample() {
const [currentPage, setCurrentPage] = useState(1);
const [searchTerm, setSearchTerm] = useState('React');
const [resultsPerPage, setResultsPerPage] = useState(10);
const totalResults = 156;
const totalPages = Math.ceil(totalResults / resultsPerPage);
const mockResults = Array.from({ length: resultsPerPage }, (_, index) => ({
id: (currentPage - 1) * resultsPerPage + index + 1,
title: `${searchTerm} Tutorial ${(currentPage - 1) * resultsPerPage + index + 1}`,
description: 'Comprehensive guide to modern development practices...',
category: 'Tutorial'
}));
return (
{mockResults.map(result => (
{result.title}
{result.category}
{result.description}
))}
);
}
```
### Data Table with Page Jump
```tsx
function DataTableExample() {
const [currentPage, setCurrentPage] = useState(1);
const [sortBy, setSortBy] = useState('id');
const [sortOrder, setSortOrder] = useState('asc');
const rowsPerPage = 15;
const totalRows = 342;
const totalPages = Math.ceil(totalRows / rowsPerPage);
const mockData = Array.from({ length: rowsPerPage }, (_, index) => {
const id = (currentPage - 1) * rowsPerPage + index + 1;
return {
id,
name: `User ${id}`,
email: `user${id}@example.com`,
status: ['Active', 'Inactive', 'Pending'][Math.floor(Math.random() * 3)],
lastLogin: '2024-01-15'
};
});
return (
Sort by ID
Sort by Name
Sort by Email
Sort by Status
Ascending
Descending
{totalRows} total records
ID
Name
Email
Status
Last Login
{mockData.map(row => (
{row.id}
{row.name}
{row.email}
{row.status}
{row.lastLogin}
))}
Showing {(currentPage - 1) * rowsPerPage + 1}-{Math.min(currentPage * rowsPerPage, totalRows)} of {totalRows}
);
}
```
### Advanced Navigation Controls
```tsx
function AdvancedNavigationExample() {
const [currentPage, setCurrentPage] = useState(1);
const [jumpToPage, setJumpToPage] = useState('');
const [pageHistory, setPageHistory] = useState([1]);
const totalPages = 50;
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
setPageHistory(prev => [...prev.slice(-9), newPage]); // Keep last 10 pages
};
const goToFirstPage = () => handlePageChange(1);
const goToLastPage = () => handlePageChange(totalPages);
const goToRandomPage = () => {
const randomPage = Math.floor(Math.random() * totalPages) + 1;
handlePageChange(randomPage);
};
return (
First Page
Last Page
Random Page
Jump to page:
of {totalPages}
Recently visited pages:
{pageHistory.slice(-5).reverse().map((page, index) => (
handlePageChange(page)}
>
{page}
))}
Page {currentPage}
Content for page {currentPage} would be displayed here.
);
}
```
### Form-based Page Navigation
```tsx
function FormPageNavigationExample() {
const [currentPage, setCurrentPage] = useState(1);
const [pageInput, setPageInput] = useState('');
const [isValidPage, setIsValidPage] = useState(true);
const totalPages = 100;
const validateAndNavigate = () => {
const pageNumber = parseInt(pageInput);
if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > totalPages) {
setIsValidPage(false);
return;
}
setIsValidPage(true);
setCurrentPage(pageNumber);
setPageInput('');
};
const handleKeyPress = (event) => {
if (event.key === 'Enter') {
validateAndNavigate();
}
};
const handleInputChange = (value) => {
setPageInput(value);
setIsValidPage(true); // Reset validation state when user types
};
return (
Page {currentPage} Content
This is the content for page {currentPage} of {totalPages}.
);
}
```
### Mobile-Optimized Page Input
```tsx
function MobilePageInputExample() {
const [currentPage, setCurrentPage] = useState(1);
const [isMobile, setIsMobile] = useState(false);
const totalPages = 30;
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
return (
Page {currentPage}
Content optimized for {isMobile ? 'mobile' : 'desktop'} viewing.
{isMobile ? (
setCurrentPage(currentPage - 1)}
leadingIcon={ setCurrentPage(currentPage + 1)}
trailingIcon={
) : (
)}
);
}
```
### Batch Operations with Page Navigation
```tsx
function BatchOperationsExample() {
const [currentPage, setCurrentPage] = useState(1);
const [selectedItems, setSelectedItems] = useState(new Set());
const [selectAll, setSelectAll] = useState(false);
const itemsPerPage = 20;
const totalItems = 189;
const totalPages = Math.ceil(totalItems / itemsPerPage);
const mockItems = Array.from({ length: itemsPerPage }, (_, index) => {
const id = (currentPage - 1) * itemsPerPage + index + 1;
return {
id,
name: `Item ${id}`,
status: 'Active',
type: ['Document', 'Image', 'Video'][Math.floor(Math.random() * 3)]
};
});
const handleSelectAll = (checked) => {
setSelectAll(checked);
if (checked) {
const currentPageIds = mockItems.map(item => item.id);
setSelectedItems(new Set([...selectedItems, ...currentPageIds]));
} else {
const currentPageIds = new Set(mockItems.map(item => item.id));
setSelectedItems(new Set([...selectedItems].filter(id => !currentPageIds.has(id))));
}
};
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
setSelectAll(false); // Reset select all when changing pages
};
return (
{selectedItems.size > 0 && (
{selectedItems.size} items selected
Delete Selected
Export Selected
)}
Page {currentPage} of {totalPages} ({totalItems} total items)
{mockItems.map(item => (
{
const newSelected = new Set(selectedItems);
if (checked) {
newSelected.add(item.id);
} else {
newSelected.delete(item.id);
}
setSelectedItems(newSelected);
}}
/>
{item.name}
{item.type}
{item.status}
))}
);
}
```
### Real-time Page Validation
```tsx
function RealTimeValidationExample() {
const [currentPage, setCurrentPage] = useState(1);
const [inputValue, setInputValue] = useState('');
const [validationMessage, setValidationMessage] = useState('');
const [isValid, setIsValid] = useState(true);
const totalPages = 75;
const validatePageInput = (value) => {
if (value === '') {
setValidationMessage('');
setIsValid(true);
return;
}
const pageNumber = parseInt(value);
if (isNaN(pageNumber)) {
setValidationMessage('Please enter a valid number');
setIsValid(false);
return;
}
if (pageNumber < 1) {
setValidationMessage('Page number must be at least 1');
setIsValid(false);
return;
}
if (pageNumber > totalPages) {
setValidationMessage(`Page number cannot exceed ${totalPages}`);
setIsValid(false);
return;
}
setValidationMessage(`Valid page number (${pageNumber})`);
setIsValid(true);
};
const handleInputChange = (value) => {
setInputValue(value);
validatePageInput(value);
};
const applyPageChange = () => {
if (isValid && inputValue) {
setCurrentPage(parseInt(inputValue));
setInputValue('');
setValidationMessage('');
}
};
return (
Current Page: {currentPage}
Content for page {currentPage} goes here.
);
}
```