Pagination
Import
import { Pagination } from "@sparrowengg/twigs-react";
Usage
Result
Loading...
Live EditorOpen in playground
function App() { const [activePage, setActivePage] = useState(1); return ( <Pagination activePage={activePage} itemsPerPage={10} total={100} onChange={(event, page) => setActivePage(page)} /> ); }
siblingCount
siblingCount
is the number of buttons to show on left and right of the active page button. By default siblingCount
count is 1.
<Pagination
activePage={activePage}
itemsPerPage={10}
total={100}
siblingCount={2}
onChange={(event, page) => setActivePage(page)}
/>
Props
Property | Description | Type | Default |
---|---|---|---|
activePage | Current highlighted page | number | |
itemsPerPage | Items in each page | number | |
total | total items | ||
siblingCount | number of buttons to show on left and right of the active page button | number | 1 |
onChange | function | ||
size | size of buttons in pagination | xxs xs sm md lg xl 2xl |