Nurturing Palpable Magnificence

    react-page-scroller-qua

    2.0.7-beta • Public • Published

    React Page Scroller (Beta)

    Simple React component for smoothy full-page scolling.

    New beta version 2.0.6-beta released!!!

    Demo

    You can scroll the page using mouse wheel, touch scroll or keyboard arrows.

    Live demo: vikliegostaiev.github.io/react-page-scroller

    To run demo app locally:

    npm install
    npm start
    

    App will start on localhost:3000.

    Installation

    via npm:

    npm install react-page-scroller --save
    

    Usage

    Example is in demo/src.

    Properties

    Property Type Description Default Value
    animationTimer number Animation duration in milliseconds 1000
    blockScrollUp bool block scroll up false
    blockScrollDown bool block scroll up false
    containerHeight number/string height of react-page-scroller element 100vh
    containerWidth number/string width of react-page-scroller element 100vw
    customPageNumber number external selected page, number of pages should start from 0, should be combined with pageOnChange usage (see example in demo/src/FullPage.js for more information). This prop was introduced as a replacement for "goToPage" method from legacy version
    handleScrollUnavailable function callback, is calling when someone tries to scroll over last or first child component
    pageOnChange function callback after page was scrolled
    renderAllPagesOnFirstRender bool flag for render all pages at first render of component
    transitionTimingFunction String CSS transition timing function name ease-in-out
    animationTimerBuffer number Animation buffer timing 200

    Dependencies

    react-page-scroller requires:

    • React
    • lodash
    • Prop Types

    Legacy Properties

    Property Type Description Default Value
    animationTimer number Animation duration in milliseconds 1000
    transitionTimingFunction String CSS transition timing function name ease-in-out
    pageOnChange function callback on page scroll
    goToPage function using with ref, go to selected page, number of pages must start from 0
    scrollUnavailable function callback, is calling when someone tries to scroll over last or first child component
    containerHeight number/string height of react-page-scroller element 100vh
    containerWidth number/string width of react-page-scroller element 100vw
    blockScrollUp bool block scroll up false
    blockScrollDown bool block scroll up false

    Install

    npm i react-page-scroller-qua

    DownloadsWeekly Downloads

    3

    Version

    2.0.7-beta

    License

    MIT

    Unpacked Size

    2.18 MB

    Total Files

    12

    Last publish

    Collaborators

    • quuu