Numeric Production Mechanism
    Wondering what’s next for npm?Check out our public roadmap! »

    react-component-pagination

    1.0.0 • Public • Published

    react-component-pagination

    A simple component stateless for create pagination from external data

    Install

    npm i -S react-component-pagination
    
    

    Usage

    import React from 'react'
    import ReactDom from 'react-dom'
    import Pagination from 'react-component-pagination'
     
    const App = () => (
        <Pagination 
            pages={0}
            page={100}
            onClick={ page => console.log(`Page selected ${page}`) }
        />
    )
     
    ReactDom.render(<App />,document.getElementById('root'))

    It renders something like:

    <ul class="index__pagination___sk_9O">
        <button class="index__itemPagination___S-Ybn" disabled="">&lt;</button>
        <button class="index__itemPagination___S-Ybn" disabled="">&lt;&lt;</button>
        <button class="index__pageCurrent___-4MRX">1</button>
        <button class="index__itemPagination___S-Ybn">2</button>
        <button class="index__itemPagination___S-Ybn">3</button>
        <button class="index__itemPagination___S-Ybn">4</button>
        <button class="index__itemPagination___S-Ybn">5</button>
        <button class="index__itemPagination___S-Ybn">6</button>
        <button class="index__itemPagination___S-Ybn">7</button>
        <button class="index__itemPagination___S-Ybn">8</button>
        <button class="index__itemPagination___S-Ybn">9</button>
        <button class="index__itemPagination___S-Ybn">10</button>
        <button class="index__itemPagination___S-Ybn">&gt;&gt;</button>
        <button class="index__itemPagination___S-Ybn">&gt;</button>
    </ul>

    See example using redux and API of Giphy

    Props

    Pagination is the Pagination component itself, it can receive the following properties:

    • onClick {Function} Triggered when the user clicks on a page and the pages should be changed. Required.
    • pages {Number} Total number of pages. Required.
    • page {Number} Current page. Required.
    • numberPages {Number} Number of pages to display. Default: 10.

    Install

    npm i react-component-pagination

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar