themesberg / themesberg/flowbite-react
Replace `<Pagination>` `<button>` s with `<a>`s
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 506
- PR merge metrics
- No merged PRs in 30d
Description
Note: if you like the idea, I am happy to create a PR.
Is your feature request related to a problem? Please describe.
I want to use pagination but with each number being an anchor instead of relying on an event handlers.
This is mostly for SEO purposes. Search engines may not run the JS to see where the pagination actions lead to, and even if they do, they may not consider it an internal link.
Describe the solution you'd like
A clear and concise description of what you want to happen.
The current api is like this:
<Pagination
currentPage={1}
onPageChange={t}
totalPages={100}
/>
I would probably do it like this:
Add another prop called getPageUrl, that takes a function from a number to a string. If supplied, the page link is wrapped in a Next Link with the anchor being the provided string.
getPageUrl can be used in conjunction with onPageChange, in which case the action in onPageChange takes precedence, but the link is still there for SEO purposes.
If getPageUrl is supplied but there is no onPageChange, clicking the page number takes you to the URL as per normal browser behaviour.
Example use:
<Pagination
currentPage={1}
getPageUrl={(p) => `/pages/${p}`}
totalPages={100}
/>
Describe alternatives you've considered
- I could write my own component
- I could use the pagination as-is, and separately put links in the bottom of the page for SEO.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Pagination component and the pagination documentation example referenced in the issue. Confirm the proposed getPageUrl behavior for anchor navigation, including the interaction with onPageChange, and consider the work done when both cases match the described browser and callback behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, tailwindcss, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100