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

    custom_react_pages

    1.3.8 • Public • Published

    custom-react-pages

    npm David Maintainability CircleCI Coverage Status

    Custom reacts pages makes app development in react simple by providing a custom pagination. This means that the pagination functionality is provided but the styling is left to the developer to handle.

    Installation

    • npm i custom_react_pages
      OR
    • yarn add custom_react_pages

    Demo

    Click the here to view a demo of the package

    Alt Text

    Usage

    ...
    import Pagination from 'custom-react-pages';
     
    ...
    <Pagination 
        itemsPerPage={1}
        next="next"
        prev = "previous"
        data=[{firstName:'John',lastName:'Doe'},{firstName:'Nhoj',lastName:'Eod'}]
        oneItem={
            (item) => 
                <div>
                    <div>{item.firstName}</div>
                    <div>{item.lastName}</div>
                </div>
        }
    />
    ...

    Styling the pagination buttons

    The following is the JSX structure of the pagination buttons. Note that the content that will appear inthe prev and next buttons is completely dependent upon you. Moreover, the styling we have provided below is just an example incase you are using a .css or .scss files, you can however style it the way you wish.

    <Pagination
          itemsPerPage={5}
          activePageStyle={//Add css style for active page button e.g { backgroundColor: '#00b9f2', color: 'white' }}
          next= {//Add what you want to appear as the next button e.g 'next'}
          prev={//Add what you want to appear as previous button e.g 'prev'}
          data={//This is the array of data you want to paginate e.g [{fistName:'john'},{firstName:'Doe'}]}
          pageButtons={// Add the number of page buttons you want to appear e.g 10}
          onePage={// Format of a single item goes here e.g
              (item, index) => (
            <div key={index} className="oneItem">
              <div>{item.firstName}</div>
            </div>
          )}
        />

    styling (.css file)

    ...
    .pagination-buttons{
        //Your style goes here
    }
    .arrows{
        //Your style goes here
    }
    .arrows button{
        //Your style goes here
    }
    .pages{
        //Your style goes here
    }
    .pages button{
        //Your style goes here
    }
    ...

    styling (.scss file)

    ...
    .pagination-buttons{
        //Your style goes here 
        .arrows{
        //Your style goes here 
            button{
            //Your style goes here 
            }
        }
    .pages{
        //Your style goes here 
            button{
            //Your style goes here 
            }
        }
    }
    ...

    Contribution

    This package is an open source project. Any developer who wish to contribute on this project can follow the steps below.

    • Raise an issue, An issue can be anything valid that you wish to work on.
    • The maintainers will review the issue and if it is valid, we will add you as a collaborator.
    • Fork the repo and create a new branch
    • Work on what you wanted to work on and raise a PR.
    • Your PR will be reviewed and if it is flawless, we will go ahead and merge your PR.

    Author

    hezronkimutai

    Contributors

    Install

    npm i custom_react_pages

    DownloadsWeekly Downloads

    13

    Version

    1.3.8

    License

    ISC

    Unpacked Size

    10.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar