React-paginator-responsive NPM

React Paginator

React Paginator Responsive Component

Development Environments

Installation

npm

npm i react-paginator-responsive

Example

import { Paginator } from "react-paginator-responsive";

function App() {

  return (
    <Paginator page={1} pageSize={10} pageGroupSize={7} totalItems={120} />
  );

}

export default App;

Custom Styles

import { Paginator } from "react-paginator-responsive";

function App() {

  const styles = {
    hideBackNextButtonText: false,
    backAndNextTextButtonColor: "black",
    paginatorButtonColor: "green",
    paginatorButtonBackgroundColor: "#FFF8DC",
    paginatorButtonSelectedColor: "red",
    paginatorButtonHoverColor: "#F0F8FF",
    lateralMargin: "0 2rem",
  };

  return (
    <Paginator
      page={1}
      pageSize={10}
      pageGroupSize={7}
      totalItems={120}
      styles={styles}
    />
  );
}

export default App;

Props

Name	Type	Description
page	number	current page.
pageSize	number	Items displayed by page.
pageGroupSize	number	Buttons page size displayed in the paginator.
items	object array	Data.
callback	function	Function to call the endpoint with a new page value.
styles	object	Custom styles.

Custom Styles Props

Name	Type	Description
pageSizehideBackNextButtonText	boolean	Show or hide the text of the previous and next buttons. By default is shown with a true value.
backAndNextTextButtonColor	string	Text color of the previous and next buttons.
paginatorButtonColor	string	Text Color of the page buttons list.
paginatorButtonBackgroundColor	string	Backgound color of the page buttons list.
paginatorButtonSelectedColor	string	Text color of the page button after be selected.
paginatorButtonHoverColor	string	Background color of the page buttons list on hover.
lateralMargin	string	lateral margin of the paginator component. Default value: `0px 0px 0px 0px`
iconColor	string	Icon color. You can use hex, rgb and rgba values to set it.
disabledColor	string	Color for disable selector applied to icons and previous and next buttons. Use hex, rgb and rgba values to set it.
PaginatorInfoColor	string	Color applied to the paginator info section. Use hex, rgb and rgba values to set it.
paginatorButtonSelectedBackgroundColor	string	Color applied to the background of the selected page button. Use hex, rgb and rgba values to set it.
hidePaginatorInfo	boolean	Hide or show the pagination section info. Boolean value.
centerPaginator	boolean	Center the paginator and the pagination section info. Boolean value.