Naming Prosecution Mitigator

    react-responsive-pagination
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.1 • Public • Published

    React Responsive Pagination

    npm version minzipped size GitHub license Test Release semantic-release

    A responsive React pagination component which intelligently renders to the available width

    🌟 Just updated for React 18 🌟

    react-responsive-pagination example

    ⚡️ LIVE DEMO - try it out for yourself! ⚡️

    📕 Visit https://react-responsive-pagination.elantha.com to get started 🚀

    🥾 Works out of the box with Bootstrap 4.x

    Using Bootstrap? See the Bootstrap 4 Getting Started Guide

    🎨 Supports custom styling

    Custom styles? No problem - see the Custom Styles Guide

    Quick Start

    npm install react-responsive-pagination
    // ... make sure appropriate css is in the project (see guides above)
    import React, { useState } from 'react';
    import Pagination from 'react-responsive-pagination';
    
    function MyApp() {
      const [currentPage, setCurrentPage] = useState(4);
    
      const totalPages = 17;
    
      return (
        <Pagination
          current={currentPage}
          total={totalPages}
          onPageChange={setCurrentPage}
        />
      );
    }

    ✔︎ Requirements / Compatibility

    • React 18, 17 and 16.8 upwards
    • Modern browsers only - not suitable for IE 11

    🔧 Props

    Prop name Type Description
    current number The current active page. Indexed from 1
    total number The total number of pages
    onPageChange (newPage: number) => void A callback handler which is called when the user clicks a new page, note that the active page will not change unless the current prop is updated to reflect the new page (as in the example above). The newPage value is indexed from 1
    maxWidth (optional) number (optional) The maximum width (in pixels) of the pagination component. Specify a value if you want to override the automatic sizing. Note this width may be exceeded in the case where it's not possible to output a small enough component
    previousLabel (optional) string (optional) The label for the previous button, default value is «
    nextLabel (optional) string (optional) The label for the next button, default value is »

    See Props Reference for the full list

    About Auto Sizing

    More info in the FAQ

    Install

    npm i react-responsive-pagination

    DownloadsWeekly Downloads

    791

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    128 kB

    Total Files

    104

    Last publish

    Collaborators

    • elantha