anubra266/choc-paginator

📟 The Complete Pagination Library for Chakra UI

choc-paginator

Pagination for Chakra UI

Install

npm install --save @choc-ui/paginator
#OR
yarn add @choc-ui/paginator

Usage

Go Here

License

MIT © anubra266

Contributors ✨

Thanks goes to these wonderful people (emoji key):

yuichiro miyamae 💻

Aleksei Maslakov 💻

Abraham 💻 📖

f-laino 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

choc-paginator's Issues

Allow href attribute (for SEO)

Can you add an optional attribute for href, also with an optional base path string (or the ability to customize its behavior with a function, as like as itemRender).
Example:

<Flex
      w="full"
      bg={useColorModeValue("gray.400", "gray.600")}
      p={50}
      alignItems="center"
      justifyContent="center"
    >
      <Pagination
        defaultCurrent={2}
        total={50}
        paginationProps={{ display: "flex", mb: 4 }}
        forwardHref={true}
        basePath="https://localhost/"
      />
</Flex>

Empty span before pagination buttons

<span> that's intended to hold the total number of items, when showTotal is set, stays even when showTotal is NOT set. This makes it hard to left align the pagination component.

'backward' in itemRender will not display correctly

If itemRender is defined and backward is specified, it will not be displayed correctly.
The rightRender is passed in src/components/pagination.tsx:L153, but I think it should be leftRender.

The example below will appear as shown in the picture.

import { Button, forwardRef } from "@chakra-ui/react"
import ChocPaginator from "@choc-ui/paginator"
import React, { ComponentProps } from "react"

type ItemRenderFn = ComponentProps<typeof ChocPaginator>["itemRender"]

const PrevButton = forwardRef((props, ref) => (
  <Button ref={ref} {...props}>
    Prev
  </Button>
))

const NextButton = forwardRef((props, ref) => (
  <Button ref={ref} {...props}>
    Next
  </Button>
))

const BackwardButton = forwardRef((props, ref) => (
  <Button ref={ref} {...props}>
    Backward
  </Button>
))

const ForwardButton = forwardRef((props, ref) => (
  <Button ref={ref} {...props}>
    Forward
  </Button>
))

export const Pagination: React.FC = () => {
  const itemRender: ItemRenderFn = (_, type) => {
    if (type === "prev") return PrevButton
    if (type === "next") return NextButton
    // This will not be rendered.
    if (type === "backward") return BackwardButton
    if (type === "forward") return ForwardButton
  }

  return (
    <ChocPaginator
      colorScheme="blue"
      defaultCurrent={5}
      itemRender={itemRender}
      pageSize={10}
      paginationProps={{
        display: "flex",
      }}
      total={500}
    />
  )
}

I tried to fix it, but gave up because it fails to test on the master branch.
Would be great to see this fixed.

Responsive Pagination

No option for responsive pagination

Pagination can go to 0

The pagination can go to 0 through the fast left button.

https://github.com/anubra266/choc-paginator/blame/431123d410c8cefa5445515fb8658f9ee25b4432/src/components/pagination.tsx#L35

This lane should be the culprit. Change the 0 to 1, and you can't go to page 0 which doesn't exist.

PaginationComp calling hooks in different orders on each render, causing Chakra-UI toast issues.

Whenever this Pagination component is rendered within my app, the following error is logged to the console:

Warning: React has detected a change in the order of Hooks called by PaginationComp. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks.

For some reason, this is interfering with the ability to use chakra-ui's Toast component, to the point that the toast is not shown at all.

The following error is reported when attempting (and failing) to show toast:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Is this a known issue? Would be great to see this fixed.