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 is planned in a future release. Until then, Option 2 at https://reactjs.org/link/uselayouteffect-ssr can be used:

import ResponsivePagination, {
  ResponsivePaginationProps,
} from 'react-responsive-pagination';

function ResponsivePaginationSSR(props: ResponsivePaginationProps) {
  const [showPagination, setShowPagination] = useState(false);

  useEffect(() => {
    setShowPagination(true);
  }, []);

  if (!showPagination) {
    return null;
  }

  return <ResponsivePagination {...props} />;
}

...

function MyApp() {
    ...
    return <ResponsivePaginationSSR current={current} ... />;
}Copy

(a similar workaround is used on this documentation site)

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 with Remix 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)