Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to remove next and Previous buttons from Pagination Flowbite Library

How to remove next and Previous buttons from pagination of flowbite library?
I write this code but the buttons doesn’t remove.
My goal is to reach this figure:
Pagination in flowbite

import { Pagination } from "flowbite-react";

<Pagination
        className="mx-auto"
        currentPage={1}
        totalPages={3}
        showPrevious={false}
        showNext={false}
      />
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I did it in a simpler way

    import { Pagination } from "flowbite-react";

const customTheme = {
   pagination: {
    pages: {
      base: "xs:mt-0 mt-2 inline-flex items-center -space-x-px gap-4",
      showIcon: "inline-flex",
      previous: {
        base: "hidden",
        icon: "hidden",
      },
      next: {
        base: "hidden",
        icon: "hidden",
      },
    },
  },
};

export default function MyPage() {
  return (
    <Pagination
      theme={customTheme.pagination}
      className="mx-auto"
      currentPage={1}
      totalPages={3}
    />
  );
}

  2. 0

    Looking at the source code for Pagination, there does not seem to be any API surface to prevent rendering of the Previous and Next elements.

    However, you could work-around this by hiding the <li> elements that house these links, like:

    <Pagination
  className="mx-auto [&_li:is(:first-child,:last-child)]:hidden"
  currentPage={1}
  totalPages={3}
/>

    Or by using one of the other options for setting classnames, like:

    import { Flowbite } from "flowbite-react";

const customTheme = {
  pages: {
    base: '[&_li:is(:first-child,:last-child)]:hidden',
  },
};

export default function MyPage() {
  return (
    <Flowbite theme={{ theme: customTheme }}>
      <Pagination
        className="mx-auto"
        currentPage={1}
        totalPages={3}
      />
    </Flowbite>
  );
}

    Or

    import { Pagination } from "flowbite-react";

const customTheme = {
  pages: {
    base: '[&_li:is(:first-child,:last-child)]:hidden',
  },
};

export default function MyPage() {
  return (
    <Pagination
      theme={theme}
      className="mx-auto"
      currentPage={1}
      totalPages={3}
    />
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search