themesberg / themesberg/flowbite-react

Replace `<Pagination>` `<button>` s with `<a>`s

Open
#791 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

:rocket: enhancement good first issue help wanted
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.