search

AdeleD / react-paginate

A ReactJS component that creates a pagination
MIT License
2.76k stars 628 forks source link

Should we add showNext and showPrevious? #458

Closed vova42matters closed 2 years ago

vova42matters commented 2 years ago

First of all, thanks for the package and everyone who has contributed! :) I'm using react-paginate in nextjs and we've faced one issue with seo, because e.g. if you're on the last page, <li class="next"/> gets rendered anyway, even though it's not visible on page it is still in source code. Looking at react-paginate source code, next and previous 'buttons' will get rendered anyway, what do you think if we add showNext and showPrevious optional props to check whether these elements should be triggered? I can take care of coding, just need your opinion & confirmation. Thanks!

vova42matters commented 2 years ago

Fix that worked for me: const removeNextPreviousButtons = (content) => { const div = document.createElement('div'); div.innerHTML = content; div.querySelector('.next')?.remove(); div.querySelector('.previous')?.remove(); return div.innerHTML.toString(); };

import { renderToStaticMarkup } from 'react-dom/server'; const layout = renderToStaticMarkup(removeNextPreviousButtons(<Pagination />)); return <div className="pagination-wrapper" dangerouslySetInnerHTML={{ __html: layout }} />;