rc-pagination

What is rc-pagination?

The rc-pagination package is a React component for creating paginated interfaces, allowing users to navigate through pages of items. It provides a range of customization options to tailor the pagination behavior and appearance to the needs of different applications.

What are rc-pagination's main functionalities?

Basic Pagination

This code sample demonstrates how to render a basic pagination component with a total of 50 items.

import Pagination from 'rc-pagination';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Pagination total={50} />, 
  document.getElementById('container')
);

Custom Page Size

This code sample shows how to set a custom page size and enable a size changer dropdown for the user to select how many items to display per page.

import Pagination from 'rc-pagination';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Pagination total={500} defaultPageSize={20} showSizeChanger />, 
  document.getElementById('container')
);

Controlled Component

This code sample illustrates how to create a controlled pagination component where the current page state is managed by the parent component.

import Pagination from 'rc-pagination';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [current, setCurrent] = useState(1);
  const onChange = page => {
    setCurrent(page);
  };

  return (
    <Pagination current={current} onChange={onChange} total={100} />
  );
};

ReactDOM.render(<App />, document.getElementById('container'));

Jump to Page

This code sample demonstrates how to enable the 'quick jumper' feature, allowing users to jump to a specific page directly.

import Pagination from 'rc-pagination';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Pagination total={100} showQuickJumper />, 
  document.getElementById('container')
);

Other packages similar to rc-pagination

react-paginate

react-paginate is a React component to create pagination. It provides built-in styles and is highly customizable. Compared to rc-pagination, react-paginate might be more suitable for those who prefer a component with out-of-the-box styled elements.

react-js-pagination

react-js-pagination is another React component for pagination. It is similar to rc-pagination but offers different customization options and styles. It might be a good alternative for users looking for a slightly different look and feel.

material-ui

material-ui is a set of React components that implement Google's Material Design, including a pagination component. It is a comprehensive UI framework that offers a Material Design styled pagination component, which is different from the minimalistic approach of rc-pagination.

README

rc-pagination

---

React Pagination Component.

Development

npm install
npm start

Example

http://localhost:3000/examples/

online example: http://react-component.github.io/pagination/examples/

Feature

• support ie9,ie9+,chrome,firefox,safari

Install

Usage

var Pagination = require('rc-pagination');
var React = require('react');
React.render(<Pagination />, container);

API

Parameter	Description	Type	Default
disabled	disable pagination	Bool	-
defaultCurrent	uncontrolled current page	Number	1
current	current page	Number	undefined
total	items total count	Number	0
defaultPageSize	default items per page	Number	10
pageSize	items per page	Number	10
onChange	page change callback	Function(current, pageSize)	-
showSizeChanger	show pageSize changer	Bool	false
pageSizeOptions	specify the sizeChanger selections	Array	['10', '20', '30', '40']
onShowSizeChange	pageSize change callback	Function(current, size)	-
hideOnSinglePage	hide on single page	Bool	false
showPrevNextJumpers	show jump-prev, jump-next	Bool	true
showQuickJumper	show quick goto jumper	Bool / Object	false / {goButton: true}
showTotal	show total records and range	Function(total, [from, to])	-
className	className of pagination	String	-
simple	when set, show simple pager	Object	null
locale	to set l10n config	Object	zh_CN
style	the style of pagination	Object	{}
showLessItems	show less page items	Bool	false
showTitle	show page items title	Bool	true
itemRender	custom page item renderer	Function(current, type: 'page'	'prev'
prevIcon	specifict the default previous icon	ReactNode | (props: PaginationProps) => ReactNode
nextIcon	specifict the default previous icon	ReactNode | (props: PaginationProps) => ReactNode
jumpPrevIcon	specifict the default previous icon	ReactNode | (props: PaginationProps) => ReactNode
jumpNextIcon	specifict the default previous icon	ReactNode | (props: PaginationProps) => ReactNode

License

rc-pagination is released under the MIT license.