Socket
Socket
Sign inDemoInstall

rc-pagination

Package Overview
Dependencies
Maintainers
0
Versions
202
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-pagination

pagination ui component for react


Version published
Weekly downloads
1.4M
increased by3.2%
Maintainers
0
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 22 Sep 2024

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc