This package has been deprecated

    Author message:

    No longer actively maintained. Please use @makotot/ghostui instead.

    @makotot/paginated
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Paginated CI

    npm NPM npm bundle size npm bundle size GitHub contributors semantic-release

    React render props & custom hook for pagination.

    Features

    Install

    npm i @makotot/paginated

    Example

    Usage

    Render Props

    import { Paginated } from '@makotot/paginated'
    
    ...
    
    return (
      <Paginated currentPage={1} totalPage={10} siblingsSize={2} boundarySize={2}>
        {({ pages, currentPage, hasPrev, hasNext, getFirstBoundary, getLastBoundary, isPrevTruncated, isNextTruncated }) => (
          <div>
            {hasPrev() && <a href="#">prev</a>}
            {getFirstBoundary().map(boundary => <a href="#" key={boundary}>{boundary}</a>)}
            {isPrevTruncated && <span>...</span>}
            {pages.map(page => {
              return page === currentPage ? (
                <span key={page}>{page}</span>
              ) : (
                <a href="#" key={page}>{page}</a>
              );
            })}
            {isNextTruncated && <span>...</span>}
            {getLastBoundary().map(boundary => <a href="#" key={boundary}>{boundary}</a>)}
            {hasNext() && <a href="#">next</a>}
          </div>
        )}
      </Paginated>
    )

    Hooks

    import { usePaginated } from '@makotot/paginated'
    
    ...
    
    const { pages, currentPage, hasPrev, hasNext, getFirstBoundary, getLastBoundary, isPrevTruncated, isNextTruncated } = usePaginated({ currentPage: 1, totalPage: 10, siblingsSize: 2, boundarySize: 2 });
    
    return (
      <div>
        {hasPrev() && <a href="#">prev</a>}
        {getFirstBoundary().map(boundary => <a href="#" key={boundary}>{boundary}</a>)}
        {isPrevTruncated && <span>...</span>}
        {pages.map(page => {
          return page === currentPage ? (
            <span key={page}>{page}</span>
          ) : (
            <a href="#" key={page}>{page}</a>
          );
        })}
        {isNextTruncated && <span>...</span>}
        {getLastBoundary().map(boundary => <a href="#" key={boundary}>{boundary}</a>)}
        {hasNext() && <a href="#">next</a>}
      </div>
    )

    Options

    currentPage

    Type: number

    The value of current page. Required.

    totalPage

    Type: number

    The value of total page. Required.

    siblingsSize

    Type: number

    The items size of one side of the middle of pagination.

    boundarySize

    Type: number

    The items size of one side of the edge of pagination.

    Returns (Hooks) | Props (Render Props)

    pages

    Type: number[]

    The page items of the middle of pagination.

    currentPage

    Type: number

    The value of current page.

    hasPrev

    Type: boolean

    Returns true if previous page of the current page is exist.

    hasNext

    Type: boolean

    Returns true if next page of the current page is exist.

    getFirstBoundary

    Type: () => number[]

    Returns page items of first boundary.

    getLastBoundary

    Type: () => number[]

    Returns page items of last boundary.

    isPrevTruncated

    Type: boolean

    Returns true if pages before the current page is ellipsized.

    isNextTruncated

    Type: boolean

    Returns true if pages after the current page is ellipsized.

    Authors

    Install

    npm i @makotot/paginated

    DownloadsWeekly Downloads

    222

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    43.6 kB

    Total Files

    17

    Last publish

    Collaborators

    • makotot