#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
  }; ... 795 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>