30ec253ab0
Based on a recent request we needed to make it optionnal in order to have simpler pagination in some cases. Closes #183
76 lines
2.0 KiB
Plaintext
76 lines
2.0 KiB
Plaintext
import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
|
|
import { Pagination, usePagination } from './index';
|
|
import * as Stories from './index.stories';
|
|
|
|
<Meta of={Stories}/>
|
|
|
|
# Pagination
|
|
|
|
The Pagination component can be used anywhere you have some data you want to split between pages, you can use it
|
|
for synchronous loading as well as asynchronous loading. You can paginate your already loaded data, but you can also
|
|
fetch it from a server, the component is really versatile.
|
|
|
|
|
|
<Canvas sourceState="none">
|
|
<Story id="components-pagination--basic"/>
|
|
</Canvas>
|
|
|
|
<Source
|
|
language='ts'
|
|
dark
|
|
format={false}
|
|
code={`import { Pagination, usePagination } from "@openfun/cunningham-react";`}
|
|
/>
|
|
|
|
## Usage
|
|
|
|
The Pagination component comes with a hook called `usePagination` that handles the logic behind it. Pagination is a
|
|
controlled component, so, to make it more handy we provide you this hook.
|
|
|
|
The most basic usage you can make of it is this one, defining a pagination with 10 pages.
|
|
|
|
### Basic
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-pagination--basic"/>
|
|
</Canvas>
|
|
|
|
|
|
### List of items
|
|
|
|
But this won't make you really happy if you want to paginate your list of items, so you can wire things a bit better.
|
|
Let's make a component that paginate a list of random number.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-pagination--list"/>
|
|
</Canvas>
|
|
|
|
### Set page programmatically
|
|
|
|
You can also set the page programmatically, for example, if you want to use a query parameter to set the page.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-pagination--force-page"/>
|
|
</Canvas>
|
|
|
|
|
|
### Hide go to input
|
|
|
|
You can also hide the go to input if you don't want to allow the user to go to a specific page or to have a simpler pagination.
|
|
|
|
<Canvas of={Stories.WithoutGoto}/>
|
|
|
|
### Things to know
|
|
|
|
- The pagination will never render if the number of pages is less than 2.
|
|
|
|
## Props
|
|
|
|
### `<Pagination/>` component
|
|
|
|
<ArgTypes of={Pagination} />
|
|
|
|
### `usePagination` hook
|
|
|
|
<ArgTypes of={usePagination} />
|