Socket
Socket
Sign inDemoInstall

rc-pagination

Package Overview
Dependencies
10
Maintainers
10
Versions
199
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-pagination

pagination ui component for react


Version published
Maintainers
10
Weekly downloads
1,183,958
decreased by-6.24%

Weekly downloads

Package description

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

Readme

Source

rc-pagination

React Pagination Component.

NPM version npm download build status Codecov bundle size dumi

Development

npm install
npm start

Examples

Online example: https://pagination-react-component.vercel.app Local example: npm run start then http://localhost:9001

Install

rc-pagination

Usage

import Pagination from 'rc-pagination';

ReactDOM.render(<Pagination />, container);

API

ParameterDescriptionTypeDefault
disableddisable paginationBool-
defaultCurrentuncontrolled current pageNumber1
currentcurrent pageNumberundefined
totalitems total countNumber0
defaultPageSizedefault items per pageNumber10
pageSizeitems per pageNumber10
onChangepage change callbackFunction(current, pageSize)-
showSizeChangershow pageSize changerBoolfalse when total less then totalBoundaryShowSizeChanger, true when otherwise
totalBoundaryShowSizeChangerwhen total larger than it, showSizeChanger will be truenumber50
pageSizeOptionsspecify the sizeChanger selectionsArray['10', '20', '50', '100']
onShowSizeChangepageSize change callbackFunction(current, size)-
hideOnSinglePagehide on single pageBoolfalse
showPrevNextJumpersshow jump-prev, jump-nextBooltrue
showQuickJumpershow quick goto jumperBool / Objectfalse / {goButton: true}
showTotalshow total records and rangeFunction(total, [from, to])-
classNameclassName of paginationString-
simplewhen set, show simple pagerObjectnull
localeto set l10n configObjectzh_CN
stylethe style of paginationObject{}
showLessItemsshow less page itemsBoolfalse
showTitleshow page items titleBooltrue
itemRendercustom page item rendererFunction(current, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', element): React.ReactNode | (current, type, element) => element
prevIconspecify the default previous iconReactNode | (props: PaginationProps) => ReactNode
nextIconspecify the default next iconReactNode | (props: PaginationProps) => ReactNode
jumpPrevIconspecify the default previous iconReactNode | (props: PaginationProps) => ReactNode
jumpNextIconspecify the default next iconReactNode | (props: PaginationProps) => ReactNode

License

rc-pagination is released under the MIT license.

Keywords

FAQs

Last updated on 28 Dec 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc