react-ptrcontainer

    0.2.0 • Public • Published

    react-ptrcontainer

    A React component for web apps, providing Pull to Refresh a viewiOS only, as well as infinite scrollingiOS & Android tested.

    Usage

    import React from 'react';
    import { PtrContainer, PtrStatus } from 'react-ptrcontainer';
     
    let content = [];
     
    function getPtrIndicator (status) {
        // What to display while loading:
        if (status == PtrStatus.LOADING) {
            return (<div>Loading ...</div>);
        }
     
        // What to display when not loading:
        return (<div>Pull to Refresh</div>)
    }
     
    function onRefresh (ptrContainer) {
        // Refresh the contents
        content = [];
     
        // Reset the PtrContainer's status to IDLE
        ptrContainer.setPtrStatus(PtrStatus.IDLE);
    }
     
    React.render((
        <PtrContainer pullToRefreshIndicator={getPtrIndicator} onRefresh={onRefresh}>
            {content.map((article) => (
                <div>{article.title}</div>
            ))}
        </PtrContainer>
    ), document.body);

    The component will wrapp its children in a container that's not only scrollable, but can be panned vertically so that a second container becomes visible (the indicator).
    The indicator can be rendered differently, depending on the component's current PtrStatus.

    Optionally, one can enable "Infinite Scrolling" by using the properties infiniteScrollingIndicator and onLoadFurther. When the corresponding element enters the component's visible area, the onLoadFurther function will be invoked and additional content can be loaded and appended.

    Props

    Name Type Description
    id string id attribute to apply to the component's DOM node.
    className string class attribute to apply to the component's DOM node.
    pullToRefreshIndicator function The "Pull to Refresh" indicator's content to be rendered.
    onRefresh function The function to invoke when "Pull to Refresh" has been triggered.
    infiniteScrollingIndicator function The "Infinite Scrolling" indicator's content to be rendered.
    onLoadFurther function The function to invoke when "Infinite Scrolling" has been triggered.

    ScrollIntoViewportTrigger

    The PtrContainer's "Infinite Scrolling" functionality can also be used out of the PtrContainer component.
    Just import the correspondent component from the module:

    import { ScrollIntoViewportTrigger } from 'react-ptrcomponent';

    and use it in your own render method:

    render () {
     
        return (
     
            // ...
     
            <ScrollIntoViewportTrigger onTrigger={onLoadFurther}>
                Loading more ...
            </ScrollIntoViewportTrigger>
     
            // ...
     
        );
     
    }
    Name Type Description
    className string A class attribute to apply to the component's DOM node.
    onTrigger function The function to invoke when triggered.
    scrollContainer object Determines the scrollable element (as React component), if it is not the trigger component's parent.

    Platform Support

    PtrContainer Support for iOS only

    As PtrContainer makes use of the iOS WebViews' native rubberband scrolling, it is currently not supporting any other platform... yet.

    ScrollIntoViewportTrigger Support

    ScrollIntoViewportTrigger has been successfully tested on iOS and Android.

    Credits

    Pull to Refresh bases upon visiongeist/pull-to-refresh-js.

    hzdg/react-imageloader shamelessly used as kind of blueprint for the whole module setup, especially the tests.

    Install

    npm i react-ptrcontainer

    DownloadsWeekly Downloads

    2

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • ta2edchimp