rs
react-shift
npm i react-shift
rs

react-shift

A module for creating a single-page static website with React.

by Sean Owiecki

2.2.0 (see all)License:MITTypeScript:Not Found
npm i react-shift
Readme

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.

NameTypePropertiesDescriptionDefault
arrowLabelsobjectnext, previousSpecifies custom next and previous page link labels.{ next: 'Next page', previous: 'Previous page' }
fastLinksobjectCustom 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
fakeLinksbooleanN/AToggles psuedohyperlinking on naviation elements.true
transitionsobjectactive, nameUsed to activate and define ReactCSSTransitionGroup on the page subcomponent.null
classesobjectwrapper, navigation, page, pagination, pageNumber1, currentPage, fastLinks, navArrow, nextPage, previousPage, arrowFiller2Passes class names to subcomponent className properties.null
stylesobjectwrapper, navigation, page, pagination, pageNumber3, currentPage, fastLinks, navArrow, nextPage, previousPage, arrowFiller2Passes styles to subcomponent style properties.null
scrollable4booleanN/ASpecifies 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.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.

Downloads/wk

24

GitHub Stars

13

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
2.2.0
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate