react-shift

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.

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, pageNumber1, currentPage, fastLinks, navArrow, nextPage, previousPage, arrowFiller2	Passes class names to subcomponent className properties.	null
styles	object	wrapper, navigation, page, pagination, pageNumber3, currentPage, fastLinks, navArrow, nextPage, previousPage, arrowFiller2	Passes styles to subcomponent style properties.	null
scrollable4	boolean	N/A	Specifies if mouse wheel scrolling events on the page subcomponent triggers page changes.	false

¹ 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.