react-lazily-render-scroll-parent
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    react-lazily-render

    Build Status

    Lazily render react components.

    Delay mounting expensive components until a placeholder component has been scrolled into view.

    Installation

    npm install --save react-lazily-render
    

    Usage

    Example (source)

    import React from 'react';
    import LazilyRender from 'react-lazily-render';
     
    <div>
      ...lots of content...
      <LazilyRender
        placeholder={<PlaceholderComponent/>}
        content={<ExpensiveComponent/>}
      />
      ...lots of content...
      <LazilyRender>
        {render => render
          ? <ExpensiveComponent/>
          : <PlaceholderComponent/>
        }
      </LazilyRender>
      ...lots of content...
    </div>
     

    API

    Properties

    className

    string

    The className applied to the wrapping element.

    component

    string | React.ComponentClass

    The wrapping component.

    e.g.

    <LazilyRender component="span"/>
    <LazilyRender component={MyComponent}/>

    offset

    number | {top?: number, right?: number, bottom?: number, left?: number}

    An offset applied to the element for calculating whether the component has been scrolled into view.

    You can specify individual values for each side, or a single value used for all sides.

    placeholder

    React.Node

    Rendered when the component hasn't been scrolled into view.

    content

    React.Node

    Rendered when the component has been scrolled into view.

    children

    (render: boolean) => React.Node

    Called to render something depending on whether the component has been scrolled into view.

    onRender

    () => void

    Called when the component becomes visible for the first time.

    scrollContainer

    HTMLElement | undefined

    The container which react-lazily-render listens to for scroll events.

    This property can be used in a scenario where you want to specify your own scroll container - e.g. if the component you are rendering is asynchronously added to the DOM.

    Install

    npm i react-lazily-render-scroll-parent

    DownloadsWeekly Downloads

    4

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    28.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • akishore