Need private packages and team management tools?Check out npm Teams »

react-peekaboo

0.3.0 • Public • Published

react-peekaboo

Build Status

React component that notifies you when its child enters or exits the viewport. Under the hood, it uses the IntersectionObserver API in supported environments and falls back to listening for scroll and resize events in combination with getBoundingClientRect in unsupported environments.

Installation

yarn add react-peekaboo

Or

npm install --save react-peekaboo

Usage

import React, { useState } from 'react';
import { InView } from 'react-peekaboo';
 
function Example() {
  const [isInViewport, setIsInViewport] = useState(false);
 
  return (
    <InView onChange={setIsInViewport}>
      {ref => (
        <div ref={ref}>I am {isInViewport ? 'visible' : 'not visible'}.</div>
      )}
    </InView>
  );
}

API

InView

Props

children: (ref: React.Ref<any>) => JSX.Element

Render prop that accepts a ref as its parameter. You must apply the ref to a DOM element.

enabled: boolean

Enables/disables running the viewport-check side effect.

Default: true

offsetBottom?: number

Number of pixels to add to the bottom of the area checked against when computing in view elements.

Default: 0

offsetLeft?: number

Number of pixels to add to the left of the area checked against when computing in view elements.

Default: 0

offsetRight?: number

Number of pixels to add to the right of the area checked against when computing in view elements.

Default: 0

offsetTop?: number

Number of pixels to add to the top of the area checked against when computing in view elements.

Default: 0

onChange: (isInviewPort: boolean) => void

Callback that's invoked each time the wrapped element enters or exits the viewport.

throttle?: number

Number of ms to throttle scroll events (only applies in environments that don't support IntersectionObserver).

Default: 100

IO

Props

children: (ref: React.Ref<any>) => JSX.Element

Render prop that accepts a ref as its parameter. You must apply the ref to a DOM element.

enabled: boolean

Enables/disables running the viewport-check side effect.

Default: true

offsetBottom?: number

Number of pixels to add to the bottom of the area checked against when computing in view elements.

Default: 0

offsetLeft?: number

Number of pixels to add to the left of the area checked against when computing in view elements.

Default: 0

offsetRight?: number

Number of pixels to add to the right of the area checked against when computing in view elements.

Default: 0

offsetTop?: number

Number of pixels to add to the top of the area checked against when computing in view elements.

Default: 0

onChange: (isInviewPort: boolean) => void

Callback that's invoked each time the wrapped element enters or exits the viewport.

Scroll

children: (ref: React.Ref<any>) => JSX.Element

Render prop that accepts a ref as its parameter. You must apply the ref to a DOM element.

enabled: boolean

Enables/disables running the viewport-check side effect.

Default: true

offsetBottom?: number

Number of pixels to add to the bottom of the area checked against when computing in view elements.

Default: 0

offsetLeft?: number

Number of pixels to add to the left of the area checked against when computing in view elements.

Default: 0

offsetRight?: number

Number of pixels to add to the right of the area checked against when computing in view elements.

Default: 0

offsetTop?: number

Number of pixels to add to the top of the area checked against when computing in view elements.

Default: 0

onChange: (isInviewPort: boolean) => void

Callback that's invoked each time the wrapped element enters or exits the viewport.

throttle?: number

Number of ms to throttle scroll events.

Default: 100

Caveats

Install

npm i react-peekaboo

DownloadsWeekly Downloads

973

Version

0.3.0

License

MIT

Unpacked Size

28.4 kB

Total Files

12

Last publish

Collaborators

  • avatar