react-web-view-pager
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

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
   */
  activePagenumber
 
  /**
   * Array of "pages" - components which you was to display as pages in the viewpager
   */
  pagesReactElement[];
}

Dependencies (0)

    Dev Dependencies (25)

    Package Sidebar

    Install

    npm i react-web-view-pager

    Weekly Downloads

    1

    Version

    0.0.1

    License

    ISC

    Unpacked Size

    25.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • tjbroodryk