usePagination
React
Trykk Enter for å redigere
const Preview = () => { const [currentPage, setCurrentPage] = useState(2); const { pages, nextButtonProps, prevButtonProps } = usePagination({ totalPages: 10, currentPage, setCurrentPage: setCurrentPage, showPages: 5, }); return ( <Pagination aria-label='Sidenavigering'> <Pagination.List> <Pagination.Item> <Pagination.Button aria-label='Forrige side' {...prevButtonProps}> Forrige </Pagination.Button> </Pagination.Item> {pages.map(({ page, itemKey, buttonProps }) => ( <Pagination.Item key={itemKey}> {typeof page === 'number' && ( <Pagination.Button aria-label={`Side ${page}`} {...buttonProps}> {page} </Pagination.Button> )} </Pagination.Item> ))} <Pagination.Item> <Pagination.Button aria-label='Neste side' {...nextButtonProps}> Neste </Pagination.Button> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<Preview />)
En React-hook for å håndtere paginering.
Props
I respons får du objektet:
Bruk
På Pagination.Button
Du looper gjennom pages fra respons-objektet, og sprer buttonProps på Pagination.Button.
Legg merke til at vi sjekker typeof på page. Dette er fordi ellipser skal være en tom li.