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

const MyComponent = () => {
  const [page, setPage] = useState(0);
  const handlePageClick = (p: number) => setPage(p);

  return (
    <Providers>
      <Paginate
        page={page}
        margin={1}
        shadow="sm"
        fontWeight="bold"
        variant="outline"
        selectedVariant="solid"
        count={100}
        pageSize={10}
        onPageChange={handlePageClick}
      />
    </Providers>
  );
};

Examples

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 |

Roadmap

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