Neapolitan Pasta Maker

    @idui/react-pagination
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    Pagination React Component

    NPM Size JavaScript Style Guide Coverage Status LICENSE

    Install

    npm install --save @idui/react-pagination
    yarn add @idui/react-pagination

    Advantages

    • Versatile and fully customizable pagination
    • Custom rendering of all components (page, controls, divider of pageGroups)

    See props in Docs

    Pagination with page numbers

    import React from 'react'
    import styled, { css } from 'styled-components';
    import { ifProp } from 'styled-tools';
    import Pagination from '@idui/react-pagination'
    
    export function CustomPaginationWithPageNumbers(props) {
        const [page, setPage] = useState(1);
    
        return (
            <Container>
                <Pagination
                    currentPage={page}
                    onChangePage={setPage}
                    pagesCount={10}
                    visiblePagesCount={3}
                    renderLeftControl={(props) => <Control {...props}></Control>}
                    renderRightControl={(props) => <Control {...props}></Control>}
                    renderPage={({ number, ...props }) => <Page {...props}>{number}</Page>}
                    pageGroupsDivider={<Divider>...</Divider>}
                />
            </Container>
        );
    }
    
    const Container = styled.div`
      display: flex;
      align-items: center;
      justify-content: center;
    `;
    
    const Page = styled.span`
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      line-height: 1.4rem;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      cursor: pointer;
      &:not(:last-child) {
        margin-right: 0.35rem;
      }
      ${ifProp(
        'isActive',
        css`
          color: #ffffff;
          background-color: #0d4c0e;
        `,
        css`
          color: #666666;
          &:hover {
            color: #000000;
          }
        `
    )}
    `;
    
    const Control = styled.span`
      font-size: 1.4rem;
      cursor: pointer;
      &:first-child {
        margin-right: 1rem;
        transform: scaleY(-1) rotate(-180deg);
      }
      &:last-child {
        margin-left: 1rem;
      }
    `;
    
    const Divider = styled.span`
      margin: 0 0.5rem;
    `;

    Pagination without page numbers (for example for Slider)

    import React from 'react'
    import styled from 'styled-components';
    import { ifProp } from 'styled-tools';
    import Pagination from '@idui/react-pagination'
    
    export function CustomPaginationWithPageNumbers(props) {
        const [page, setPage] = useState(1);
    
        return (
            <Container>
                <Pagination
                    currentPage={page}
                    onChangePage={setPage}
                    pagesCount={5}
                    visiblePagesCount={0}
                    renderPage={(props) => <Page {...props} />}
                />
            </Container>
        );
    }
    
    const Container = styled.div`
      display: flex;
      align-items: center;
      justify-content: center;
    `;
    
    const Page = styled.span`
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      line-height: 1.4rem;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      cursor: pointer;
      &:not(:last-child) {
        margin-right: 0.35rem;
      }
      background-color: ${ifProp('isActive', '#0d4c0e', '#507350')};
    `;

    See more details in storybook

    License

    MIT © kaprisa57@gmail.com

    Keywords

    none

    Install

    npm i @idui/react-pagination

    DownloadsWeekly Downloads

    7

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    12.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • kaprisa57