react-inview-hook
react hooks & intersection-observer
Last updated a year ago by hrsh7th .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-inview-hook 
SYNC missed versions from official npm registry.

react-inview-hook

react-hooks with intersection-observer.

Why?

This module will cache IntersectionObservers (group by IntersectionObserverInit).

That's reason is performance on IE11 with polyfill.

Note

This module uses Map and IntersectionObserver If you use this in es5 environment, should install polyfills below.

  • Map
    • @babel/polyfill or es6-map etc.
  • IntersectionObserver
    • intersection-observer

Usage

import React, { useState, useRef } from "react";
import { useInView } from "react-inview-hook";

export const SomeComponent = () => {
  const [isInView, setIsInView] = useState(false);
  const ref = useRef(null);

  useInView({
    ref,
    onEnter: () => setIsInView(true),
    onLeave: () => setIsInView(false)
  });

  return <div ref={ref}>isInView? {isInView ? "true" : "false"}</div>;
};

API

useInView(props: UseInViewProps)

type UseInViewProps = {
  ref: React.RefObject<Element>;

  onEnter?: (entry: IntersectionObserverEntry) => void;

  onLeave?: (entry: IntersectionObserverEntry) => void;

  unobserveOnEnter?: boolean; // default: false

  root?: React.RefObject<Element>; // default: null

  rootMargin?: string; // default: '0px'

  threshold?: number | number[]; // default: 0
};

Current Tags

  • 0.1.0                                ...           latest (a year ago)

6 Versions

  • 0.1.0                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 6
Dependencies (0)
None
Dev Dependencies (18)

Copyright 2014 - 2017 © taobao.org |