react-web-view-pager

Simple react component to implement a viewpager for use on web apps. Basically uses a horizontal scroll snap with a customizable configuration and a consistent cross browser behaviour.

• works in all modern browsers
• requestAnimationFrame for 60fps
• customizable configuration (including easing functions)
• no additional dependencies

Installation

npm i -s react-web-view-pager

Or

yarn add react-web-view-pager

Usage

import ViewPager from 'react-web-view-pager

<ViewPager 
  duration={300}
  timeout={100}
  easing={(t: number): number => {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
  }}
  activePage={0} 
  offset="8rem"
  pages={[
    <LoginForm/>,
    <SignUpForm/>
  ]} 
  onPageChanged={(index) => {
    // do something
  }}
/>

Props

{
  /**
   * time in ms after which scrolling is considered finished
   **/
  timeout?: number
  /**
   * duration in ms for the smooth snap
   **/
  duration?: number
  /**
   * custom easing function
   * @param t normalized time typically in the range [0, 1]
   **/
  easing?: (t: number) => number
 
  /**
   * additional offset - can be used to alleviate any issues regarding margin/padding
   * @param t e.g. '10px' or '2rem' or 10 (when specifiyng as number, it will be treated as pixels)
   **/
  offset?: string | number
 
  /**
   * Called when the index of a page has been changed
   * either after updating the activePage prop 
   * or after scrolling/swiping to the next page
   * @param index the index of the visible page
   */
  onPageChanged?: (index: number) => void
 
  /**
   * The index of the currently active (visible) page
   */
  activePage: number
 
  /**
   * Array of "pages" - components which you was to display as pages in the viewpager
   */
  pages: ReactElement[];
}