Pagination#

Import#

import { Pagination } from "bumbag";

Usage#

function Example() {
  const [currentPage, setCurrentPage] = React.useState(1);

  return (
    <Pagination
      currentPage={currentPage}
      onChangePage={page => setCurrentPage(page)}
      numberOfPages={10}
    />
  )
}

Custom labels#

function Example() {
  const [currentPage, setCurrentPage] = React.useState(1);

  return (
    <Pagination
      nextText="Next page"
      previousText="Previous page"
      prepositionText="out of"
      currentPage={currentPage}
      onChangePage={page => setCurrentPage(page)}
      numberOfPages={10}
    />
  )
}

Props#

Pagination Props#

numberOfPages number Required

Sets the number of pages.

currentPage number

Sets the current page.

onChangePage (page: number) => void

Function to invoke when the page is changed.

nextText string

Sets the text of the next button.

previousText string

Sets the text of the previous button.

prepositionText string

Sets the preposition text.

nextButtonProps

BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 8 more ... & LocalButtonProps

Props to spread onto the next button.

previousButtonProps

BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 8 more ... & LocalButtonProps

Props to spread onto the previous button.

selectProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 796 more ...;
  selectRef?: Ref<...>;
}

Props to spread onto the select component.

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

Theming#

import { ThemeProvider } from 'bumbag';
const theme = {
  Pagination: {
    styles: {
      base: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Pagination: {
    Button: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Pagination: {
    Select: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Pagination: {
    PrepositionText: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>