Chakra-UI pagination for react

Motivation

Both rc-pagination and react-paginate are (1) overly complex and have too many options and (2) render <ul> & <li> components. I tend to use Chakra-UI lately and I prefer their simple and opinionated approach to structuring and styling an app.

This is a very simple, opinionated component, that will allow you to setup a pagination component in no time and, including Chakra-UI like styles (size, colorScheme, etc)

Install

npm install react-paginate-chakra-ui

yarn add react-paginate-chakra-ui

Usage

// index.tsx
import { chakra, ChakraProvider, Stack } from "@chakra-ui/react";
import * as React from "react";
import { render } from "react-dom";
import { Paginate } from "react-paginate-chakra-ui";
import "focus-visible";
import "./styles.css";

function App() {
  const [page, setPage] = React.useState(0);
  const handlePageClick = (p: number) => setPage(p);

  return (
    <Stack p={5}>
      <chakra.div>Page: {page}</chakra.div>
      <Paginate
        // required props 👇
        page={page}
        count={100}
        pageSize={10}
        onPageChange={handlePageClick}
        // optional props 👇
        margin={2}
        shadow="lg"
        fontWeight="blue"
        variant="outline"
        // ...border and other props also work 💪
        border="2px solid"
        // you can use w to adjust to parent
        // container
        w="full"
      />
    </Stack>
  );
}

const rootElement = document.getElementById("root");
render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  rootElement
);

Props

prop	default	required
count		yes
pageSize		yes
onClick		yes
margin	1	no
size	md	no
selectedVariant	solid	no
variant	outline	no
previousIcon	<ChevronLeftIcon />	no
nextIcon	<ChevronRightIcon />	no
colorScheme	gray	no
fontWeight	regular	no
borderRadius	md	no

Codesandbox

https://codesandbox.io/s/react-paginate-chakra-ui-u18df

Examples

Roadmap

• Add styles for selected component
  • size
  • colorScheme
  • variant
  • fontWeight
  • spacing
• Include variants for paging display
  • Display +-N pages relative to current
  • Only display 1 page
  • Keep fixed number of tiles
• Improve typing
• Add tests