Nutritious Potato Munchies

    @gemini-testing/react-lazily-render
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.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.

    onReset

    () => void

    Called when the visible component reset his state.

    eventToUpdate

    string

    Client event name on which component should update it's visibility properties.

    eventToReset

    string

    Client event name on which already visible component should reset his current state/listeners and update.

    Install

    npm i @gemini-testing/react-lazily-render

    DownloadsWeekly Downloads

    11

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    27.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • oldskytree
    • xrsd
    • kuznetsovroman
    • dudagod
    • j0tunn
    • sipayrt
    • rostik404
    • gavryushin
    • miripiruni
    • mcheshkov