jonelantha / react-responsive-pagination Goto Github PK

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at BootstrapPagination

I hope it can be solved, it is a very good library!

hi, v1.8.1
why automatically hide label/number of the active page (actually setting aria-hidden attribute)? how does user get notification about current page number?

<a class="page-link" href="#" aria-label="(current)"><span aria-hidden="true">1</span><span class="sr-only">(current)</span></a>

is there a way how to turn this behavior off? setting ariaCurrentAttr prop should be sufficient

Once I remove href="#", the problem goes away. I'll probably have to fork the project though to fix it.

Hi there - First of all, great pagination component! It's been a great help and the documentation is amazing!

I had a question on how I might go about modifying the pagination so it's reversed.

Instead of...
< 1 2 3 4 .... 10 >

It would go
< 10 9 8 7 ....1 >

My use case is to follow logic like a book. The oldest writing and material is on page 1, and will always be on page 1. The newer material is on Page 10, etc. In the current system, the new content is always on page 1, while the old content gets put into the larger pages numbers and I lose track of their location.

What's your best suggestion to achieve this behavior?

Dear contributers, add support nav classNames and onClick ellipsis. Using last version of library this is not.

This is my case

My expected

I just want to show:
[<<] [...] [ 3 ][ 4 ][ 5 ][...][>>]
How can I configure it?

I was working on an e-commerce project and when i used this package for pagination i found that these buttons are laggy and got response very late or by clicking multiple times

I need to change the styles of the list items differently for each. Is there any way I can achieve this? Or is there a way to render an element inside a list element?

is there a way how to customize those labels? think of non-en website, for example

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

please fix it

Want to change structure of paginate links because want to set design like bellow. Need different div structure for previous an next

Just wanted to say this, I was having a problem trying to implement a pagination without having the mess of using a component library only for that, and this definitely solved my problem. Thanks !!

hi, any plans for prop to remove next/prev btns?
if i hide them using CSS, JS won't calculate correct width because the plugin works the way it renders all different buttons first (single digit page btn as first child) and as first and last are hidden to achieve desired looks, btn fitting this condition has width of 0

Hi. Is it possible add ability for adding in label any components for customizing it. Currently I added it, but TS highlight an error and pagination buttons have broken styles with paddings because images have display:block

<ResponsivePagination
current={currentPage || 0}
total={totalPages}
onPageChange={onChangePage}
className="flex justify-end bg-white rounded-[10px]"
pageLinkClassName=' py-2 px-4 font-semibold'
pageItemClassName='border border-r-0 border-[#E9EEF3] py-2 mr-[-1px] text-[#1573FF]'
activeItemClassName='relative border-r-[1px] border-[#1573FF] bg-[#1573FF] text-white z-10'
previousClassName='rounded-l-[10px] font-semibold border-[#E9EEF3]'
nextClassName='rounded-r-[10px] font-medium border-r-[1px] border-[#E9EEF3]'
//@ts-ignore
previousLabel={}
//@ts-ignore
nextLabel={}
/>

With display:block

without display:block

I was going to test this library so I created a new react project with npx create react app (which is currently installing the latest version of React), but when I tried to install the react-responsive-pagination library it said it has the older react version dependency. Do you plan to make your library compatible with React v18.0 ?

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

The buttons presented for next and previous page are actually meant for first/last page. It would be nice to render both :)

Also (separate issue, really), the ellipsis should be clickable.

In the possibility that we need to paginate millions of items, the component does not seem to handle well large page numbers. (it's breaking on mobile sized screens). Perhaps you could remove the ellipsis and the first and last page buttons when there is no space left.