<!--- PaginationURLQuery.stories.mdx --->

import { useEffect } from 'react';
import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
import { Main, Box } from '@strapi/design-system';
import useQueryParams from '../../hooks/useQueryParams';
import PaginationURLQuery from './index';

<Meta title="components/PaginationURLQuery" />

# PaginationURLQuery

This component is used to change the page size.

## Imports

```js
import { PaginationURLQuery } from '@strapi/helper-plugin';
```

## Usage

<Canvas>
  <Story name="base">
    {() => {
      const [{ query }, setQuery] = useQueryParams();
      useEffect(() => {
        setQuery({ pageSize: 10, page: 1, sort: 'firstname' });
      }, []);
      return (
        <Main>
          <Box paddingTop={6}>
            <PaginationURLQuery pagination={{ pageCount: 10 }} />
          </Box>
        </Main>
      );
    }}
  </Story>
</Canvas>

### Props

<ArgsTable of={PaginationURLQuery} />
