npm package: @licuido-ui/ui_pagination
Description: The Pagination component enables the user to select a specific page from a range of pages.
Latest version: 5.1.0

# Stepper

The Pagination component enables the user to select a specific page from a range of pages.

### Author

- @author Vigneshwaran <vigneshwaran@crayond.co>

## Link

[Story Book Link stepper](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_pagination
```

## Import component

```jsx
import { Pagination } from '@licuido-ui/ui_pagination';
```

## Usage

```jsx
<Pagination count={} variant='' />
```
## Image

![alt text](./pagination.png)

## Sample Code

```jsx
<Pagination 
   count={5}
   variant=''
   shape=''
   disabled={false}
   size=''
   startIcon={<LeftArrow />}
   endIcon={<RightArrow />}
   value={05}
   totalCount={[]}
   handleChange={handleChange}
   perPage='' />
```

## Props

| Prop                                 | Type                                                        | Description                                                              |
| ------------------------------------ | ----------------------------------------------------------- | ------------------------------------------------------------------------ |
| `className`                          | `string`                                                    | Override class name for additional styling.                              |
| `sx`                                 | `SxProps<Theme>`                                            | System overrides and additional CSS styles.                              |
| `formControlStyle`                   | `SxProps`                                                   | Styles applied to the form control component.                            |
| `paginationBoxStyle`                 | `SxProps`                                                   | Styles applied to the form control box component.                        |
| `paginationButtonStyle`              | `SxProps`                                                   | Styles applied to the pagination button component.                       |
| `count`                              | `number`                                                    | The count applied to pagination.                                         |
| `variant`                            | `'text' or 'outlined'`                                      | The variant applied to pagination.                                       |
| `shape`                              | `'rounded' or 'circular'`                                   | The shape applied to pagination.                                         |
| `size`                               | `'small' or 'large' or 'medium'`                            | The size applied to pagination.                                          |
| `disabled`                           | `boolean`                                                   | Used to disable the previous and next button.                            |
| `startIcon`                          | `React.ReactNode`                                           | Change the previous icon.                                                |
| `endIcon`                            | `React.ReactNode`                                           | Change the next icon.                                                    |
| `selectIcon`                         | `React.ReactNode`                                           | Change the select component icon.                                        |
| `perPage`                            | `number or string`                                          | Define the per page value.                                               |
| `totalCount`                         | `string[]`                                                  | Define the total count for the pages.                                    |
| `handleChange`                       | `(event: SelectChangeEvent<string>) => void`                | onChange callback function for select component.                         |
| `handleChangePage`                   | `(event: React.ChangeEvent<unknown>, page: number) => void` | onClick callback function for pagination buttons.                        |
| `value`                              | `string`                                                    | State of the selected value in pagination.                               |
| `paginationBottomTextRootStyle`      | `SxProps`                                                   | Styles applied to the pagination button component.                       |
| `showPaginationBottomCountTextStyle` | `SxProps`                                                   | Styles applied to the pagination button component.                       |
| `showPaginationBottomCountText`      | `SxProps`                                                   | Styles applied to the pagination button component.                       |
| `siblingCount`                       | `number`                                                    | count applied to the pagination intervels component.                     |
| `boundaryCount`                      | `number`                                                    | count applied to the pagination intervels component.                     |
| `disableVisibleTotalCountSelectMenu` | `boolean`                                                   | prop applied to the pagination select total count memnu visible disable. |