react-paginate-chakra-ui v0.1.2

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

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