react-shift
A paginated "carousel-like" component for JSX elements. Can be used to serve pages of content or dropped as a small component into a larger stack.
Currently hard-swaps content, so smooth scrolling/sliding can only be simulated using ReactCSSTransitionGroup
.
Installation
npm install react-shift --save
Getting started
;
Props
The component can be passed objects as props to customize the navigation and page elements.
Name | Type | Properties | Description | Default |
---|---|---|---|---|
arrowLabels |
object | next , previous |
Specifies custom next and previous page link labels. | { next: 'Next page', previous: 'Previous page' } |
fastLinks |
object | Custom key/value pairs each defining a fast links. | Creates a shortcut link to a page, where the key is the link name and the value is the page index to link to. | null |
fakeLinks |
boolean | N/A | Toggles psuedohyperlinking on naviation elements. | true |
transitions |
object | active , name |
Used to activate and define ReactCSSTransitionGroup on the page subcomponent. | null |
classes |
object | wrapper , navigation , page , pagination , pageNumber 1, currentPage , fastLinks , navArrow , nextPage , previousPage , arrowFiller 2 |
Passes class names to subcomponent className properties. |
null |
styles |
object | wrapper , navigation , page , pagination , pageNumber 3, currentPage , fastLinks , navArrow , nextPage , previousPage , arrowFiller 2 |
Passes styles to subcomponent style properties. |
null |
scrollable 4 |
boolean | N/A | Specifies if mouse wheel scrolling events on the page subcomponent triggers page changes. | false |
1 pageNumber
applies that generic className every page number element, but also creates a unique class name on each page number using ${yourDefinedClass}-${pageIndex}
.
2 arrowFiller
can be used to override navArrow styling normally applied to the empty space reserved for page arrows.
3 Unlike the className
version, this prop does not currently offer unique styling for each page index number.
4 This feature is highly experimental and not recommended for use. Seriously, don't use it; it makes the component nearly unusable on laptop touchpads and mobile devices.
Advanced example:
const arrowLabels = next: '>>>' previous: '<<<'; const fastLinks = 'Third page': 2 'Fifth page': 4; const classes = navigation: 'react-shift-navigation' page: 'react-shift-page' pagination: 'react-shift-pagination' pageNumber: 'react-shift-page-number' currentPage: 'react-shift-current-page' fastLinks: 'react-shift-fast-link' navArrow: 'react-shift-nav-arrow' nextPage: 'react-shift-next-page' previousPage: 'react-shift-previous-page'; ReactDOM;
Demo
npm run demo
Open demo.html
in a browser.