Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-peekaboo

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-peekaboo

React hooks for monitoring an element's intersection with the viewport

  • 0.4.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3.5K
decreased by-27.76%
Maintainers
1
Weekly downloads
 
Created
Source

react-peekaboo

CI Status

React hooks for monitoring an element's intersection with the viewport.

Installation

npm install react-peekaboo

Usage

import React, { useState } from 'react';
import { useIntersecting, useIntersectionChange } from 'react-peekaboo';

function UseIntersectionExample() {
  let [ref, isIntersecting] = useIntersecting<HTMLDivElement>();

  return (
    <div ref={ref}>I am {isIntersecting ? 'visible' : 'not visible'}.</div>
  );
}

function UseIntersectionChangeExample() {
  let [isIntersecting, onChange] = useState<boolean>(false);
  let ref = useIntersectionChange<HTMLDivElement>(onChange);

  return (
    <div ref={ref}>I am {isIntersecting ? 'visible' : 'not visible'}.</div>
  );
}

API

Options

All functions accept a common set of options:

  • enabled?: boolean: Enables/disables running the side effect that calculates the element's intersection status. (default: true)

  • offsetBottom?: number: Number of pixels to add to the bottom of the area checked against when computing element intersection. (default: 0)

  • offsetLeft?: number: Number of pixels to add to the left of the area checked against when computing element intersection. (default: 0)

  • offsetRight?: number: Number of pixels to add to the right of the area checked against when computing element intersection. (default: 0)

  • offsetTop?: number: Number of pixels to add to the top of the area checked against when computing element intersection. (default: 0)

  • throttle?: number: Number of ms to throttle scroll events (only applies in environments that don't support IntersectionObserver or when using useScrollIntersection/useScrollIntersectionChangeCallback). (default: 100)

Exports

useIntersecting

Type: (options: Options) => [RefCallback, boolean]

Returns a ref and the element's intersection status using IntersectionObserver or scroll/resize event listeners and getBoundingClientRect in unsupported environments.

The ref returned must be attached to a DOM node.

useIntersectionChange

Type:

(onChange: (isIntersecting: boolean) => void, options: Options) => RefCallback;

Runs a callback that receives the element's intersection status each time it changes using IntersectionObserver or scroll/resize event listeners and getBoundingClientRect in unsupported environments.

Returns a ref that must be attached to a DOM node.

usePeekaboo

Type:

type SetupHandler = (
  element: HTMLElement,
  onChange: (isIntersecting: boolean) => void,
  options?: Options,
) => TeardownHandler;

(
  setup: SetupHandler,
  onChange: (isIntersecting: boolean) => void,
  options?: Options,
) => RefCallback;

Uses setup to run onChange when the element's intersection status changes. You can pass scroll, io, or peekaboo from dom-peekaboo or implement our own setup function.

Keywords

FAQs

Package last updated on 11 Sep 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc