@ignisda/remix-pagination

Remix Pagination

Pagination component for Remix apps.

Table of contents

• Remix Pagination
  • Table of contents
  • Why use this pagination module?
  • Installing
  • Example
  • Usage
  • Theming
  • Component Props
  • Contributing
    • Setup
    • Development
    • Publishing
  • Acknowledgements
  • License

Why use this pagination module?

• Accessible. Semantic HTML and fully marked up with appropriate aria roles for assisted browsing.
• Usable. The base CSS styles account for keyboard focus states and fat finger touch targets.
• Responsive. Works on all devices.
• Theme-able. Make it look however you want via custom classes.
• Self contained. There's only two required prop to get going. The rest of the logic is handled for you.
• Works with Remix. Integrated with the Remix router.

Installing

# the install command of your favorite package manager
pnpm install @ignisda/remix-pagination

Example

You can view the live example on this link.

The source code of the above website is here: remix-pagination-demo. This app contains an example using the Pokemon Graphql API.

You can run it locally by following the steps described in development.

Usage

This component is fairly self contained. You will need to pass the total number of potential results and the number of results in each page in order to calculate the number of pages to show.

import { RemixPagination } from '@ignisda/remix-pagination';

export default function () {
  return (
    <div>
      <RemixPagination total={100} size={20} />;
    </div>
  );
}

The default component is un-styled. You can use default styles by importing the CSS like you would in any Remix app as explained here.

import { styles as remixPaginationStyles } from '@ignisda/remix-pagination';

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: remixPaginationStyles },
];

When used, the pagination component will reload the same route with added pagination query parameters.

• page for the page number the user is on.

The default page is 1.

Theming

All components have the class remix-pagination__$component applied to them. This can be changed via the classPrefix prop. You can see an example here.

Component Props

The component accepts many props and you can see their documentation in the component source.

Contributing

This package was created with NX. You will need it installed to run this project.

Setup

To get set up you'll need to run pnpm install.

Development

In the root folder, run npx nx serve remix-pagination-demo. Then head over to http://localhost:3000 to see the example running.

Note: You will have to restart the development server every time you make any changes to packages/remix-pagination because Remix does not watch for files outside it's project. I have not yet figured out how to fix this.

Publishing

This project is automatically published using a combination of NX, Conventional Commits and Github Actions.

Acknowledgements

A lot of the code has been inspired from @etchteam/next-pagination.

License

MIT © IgnisDa