Pagination#

Import#

import { Pagination } from "bumbag";

Usage#

of 10
Editable example

Custom labels#

out of 10
Editable example

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.

Inherits Box props

use

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

className string

children

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)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

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

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

Pagination.styles.base
of 10
Pagination.Button.styles.base
of 10
Pagination.Select.styles.base
of 10
Pagination.PrepositionText.styles.base
of 10
Copyright © 2021 Jake Moxey