0.0.4 • Published 2 years ago

@quentinm22/cmp-pagination-react v0.0.4

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

@quentinm22/cmp-pagination-react

PACKAGE

Installation

Install Package in React project

 npm i @quentinm22/cmp-pagination-react

 or

  yarn @quentinm22/cmp-pagination-react

Update

  npm i @quentinm22/cmp-pagination-react@latest

  or

  yarn add @quentinm22/cmp-pagination-react@latest

Usage/Examples

import React, { useState } from 'react'
import {Pagination} from '@quentinm22/cmp-pagination-react'

const App = () => {
  const arrElements = [1,2,3,4,5,6,7,8,9,10,11,12,13]
  const [currentPage, setCurrentPage] = useState(1);
  const [elementsPerPage, setElementsPerPage] = useState(3);
  const indexLastItem = currentPage * elementsPerPage;
  const indexFirstItem = indexLastItem - elementsPerPage;
  const currentItems = arrElements.slice(indexFirstItem, indexLastItem);
  return(
    {currentItems.map(e => 
                <p>{e}</p>
            )}
          
            <Pagination
            currentPage={currentPage}
            setCurrentPage={setCurrentPage} 
            limit={arrElements.length}
            elementsPerPage={elementsPerPage}
            colorPrimary={'#3e3934'}
            colorFont={"white"}
            />
  )
}
PropsValue
currentPagenumber => localState
setCurentPagefunction => localState
limitnumber => array.length
elementPerPagenumber
colorPrimarystring
colorFontstring

Authors

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago