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

render(
  <Shift>
    <div>First page</div>
    <div>Second page</div>
    <div>Third page</div>
  </Shift>,
  node
);

Props

The component can be passed objects as props to customize the navigation and page elements.

¹ pageNumber applies that generic className every page number element, but also creates a unique class name on each page number using ${yourDefinedClass}-${pageIndex}.

² arrowFiller can be used to override navArrow styling normally applied to the empty space reserved for page arrows.

³ Unlike the className version, this prop does not currently offer unique styling for each page index number.

⁴ 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.render(
  <Shift
    classes={classes}
    arrowLabels={arrowLabels}
    fastLinks={fastLinks}
    transitions={transitions}
      <div>First page</div>
      <div>Second page</div>
      <div>Third page</div>
  </Shift>,
  document.getElementById('react-shift-anchor')
);

Demo

npm run demo

Open demo.html in a browser.