viewport-observer
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    ViewportObserver

    Build Status devDependency Status peerDependency Status codecov

    React Component that observe changes in the intersection of a target element with viewport using IntersectionObserver

    Install

    $ npm install --save viewport-observer

    This package depends on IntersectionObserver, so you probably need to polyfill via w3c/IntersectionObserver Polyfill before using this package.

    Usage

    // you probably need to polyfill
    import 'intersection-observer';
    import ViewportObserver from 'viewport-observer';
     
    ...
     
    <ViewportObserver
      onChange={() => console.log('onChange')}
      onEnter={() => console.log('onEnter')}
      onLeave={() => console.log('onLeave')}>
      <div>{/* ... */}</div>
    </ViewportObserver>

    You can call dispose() of ViewportObserver instance to stop observing and dispose IntersectionObserver instance.

    Config

    Property Type Default Value
    tagName String div
    display String ''
    onChange Function () => {}
    onEnter Function () => {}
    onLeave Function () => {}
    root Node null
    rootMargin DOMString 0px
    threshold Array<Number> [0]

    Related

    License

    MIT © FRESH!

    Install

    npm i viewport-observer

    DownloadsWeekly Downloads

    826

    Version

    2.3.0

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar