FAQ

About Auto Sizing

Auto sizing uses the width of the immediate parent element. For best results make sure the parent element isn't intrinsically sized; that means the width of the parent element shouldn't depend on its contents. If your layout is intrinsic then the pagination component should still fill the space correctly but you may occasionally see inconsistant results or additional renders.

You can choose to override the auto sizing by specifying the maxWidth prop (see Props section).

Very Narrow Widths

For very narrow widths the component may exceed the available space - this is to ensure that there's always a usable pagination component.

The narrowBehaviour prop can be used to specify that either the nav buttons («/») and/or the ellipsis (…) can be dropped for narrow widths - see the narrowBehaviour prop for more details.

Server Side Rendering

Warning: useLayoutEffect does nothing on the server ...

First class support for SSR was added in v2.7 - please update to the latest version to take advantage of SSR support.

(any SSR workarounds can be removed after upgrading to v2.7)

ESM only

Like many modern npm packages, react-responsive-pagination only has ESM exports - it's compatible with up-to-date versions of all popular bundlers and frameworks.

When using Remix with the Classic Remix Compiler the following will need to be added to remix.config.js:

serverDependenciesToBundle: [
    "react-responsive-pagination",
    "react-responsive-pagination/labelBehaviour",   // if required
    "react-responsive-pagination/narrowBehaviour",  // if required
    "react-responsive-pagination/presets",          // if required
],Copy

See Remix Gotchas for further details.

Using React Components for labels

Using React Components for the previousLabel and nextLabel props is currently experimental. It should work fine for simple components (for example static <img /> or <svg /> tags) but complex components with internal state and/or props which change may lead to unexpected results (full support is planned for a future release).

(NOTE the console warning about using component for labels is only shown for development builds)