How to use react-intersection-observer - 7 common examples

To help you get started, we’ve selected a few react-intersection-observer examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github maapteh / graphql-modules-app / packages / app / src / modules / product / product.spec.tsx View on Github external
it('renders correctly', async () => {
        const id = '9200000111963040';
        const testId = 'product-details';

        const { container, queryByTestId, findByText } = render(
            <MockedProvider mocks={mocks} addTypename={true}>
                <Product id={id} />
            </MockedProvider>
        );

        mockAllIsIntersecting(true);

        expect(queryByTestId(testId)).toBe(null);
        await findByText(/De Ghost Recon/);
        expect(queryByTestId(testId)).toBeDefined();

        // generic contract
        expect(container).toMatchSnapshot();
    });
});
github simonsmith / simonsmith.io / src / templates / Post.js View on Github external
export default function PostTemplate({data, location}) {
  const [ref, inView] = useInView({triggerOnce: true});
  const {post, metadata} = data;
  const {frontmatter, html} = post;
  const {
    disqus: {url, script},
  } = metadata.siteMetadata;
  const showDisqus = isProduction && inView;
  return (
    <Layout>
      <SEO description={post.excerpt} title={frontmatter.title} />
      <article>
        <header>
          <h1 css={styles.header}>{frontmatter.title}</h1>
          <time css={styles.date}>{frontmatter.date}</time>
        </header>
        <div css={styles.content} dangerouslySetInnerHTML={{__html: html}} />
        <div ref={ref}>
github mikey1384 / twinkle-network / source / components / ContentPanel / index.js View on Github external
const loading = useRef(false);
  const inputAtBottom = contentType === 'comment';
  const {
    commentId,
    commentsShown,
    loaded,
    placeholderHeight,
    rootObj,
    rootType,
    started,
    targetObj,
    visible,
    rootId
  } = contentState;

  const [ComponentRef, inView] = useInView({
    threshold: 0
  });
  const PanelRef = useRef(null);
  useLazyLoad({
    contentType,
    contentId,
    PanelRef,
    inView,
    onSetPlaceholderHeight,
    onSetVisible
  });

  const { started: rootStarted } = useContentState({
    contentType: rootType,
    contentId: rootId
  });
github mikey1384 / twinkle-network / source / components / ProfilePanel.js View on Github external
onSetOnline,
      onUploadComment,
      onUploadReply,
      onRemoveStatusMsg,
      onSetPlaceholderHeight,
      onSetVisible,
      onUpdateStatusMsg,
      onUpdateBio,
      onUploadProfilePic
    }
  } = useContentContext();
  const profile = useContentState({
    contentType: 'user',
    contentId: profileId
  });
  const [ComponentRef, inView] = useInView({
    threshold: 0
  });
  const PanelRef = useRef(null);
  useLazyLoad({
    contentType: 'user',
    contentId: profileId,
    PanelRef,
    inView,
    onSetPlaceholderHeight,
    onSetVisible
  });
  const {
    childComments = [],
    commentsLoaded,
    commentsShown,
    lastActive,
github thebuilder / react-scroll-percentage / src / useScrollPercentage.tsx View on Github external
export function useScrollPercentage(
  options: ScrollPercentageOptions = {},
): ScrollPercentageHookResponse {
  const [ref, inView, entry] = useInView(options)
  const [percentage, setPercentage] = useState(0)
  const target = entry && entry.target

  useEffect(() => {
    const handleScroll = () => {
      if (!target) return
      const bounds = target.getBoundingClientRect()
      const percentage = options.horizontal
        ? calculateHorizontalPercentage(bounds, options.threshold, options.root)
        : calculateVerticalPercentage(bounds, options.threshold, options.root)

      setPercentage(percentage)
    }

    if (inView) {
      const root = options.root || window
github pipe-cd / pipe / pkg / app / web / src / pages / deployments / index.tsx View on Github external
export const DeploymentIndexPage: FC = memo(function DeploymentIndexPage() {
  const classes = useStyles();
  const buttonClasses = useButtonStyles();
  const history = useHistory();
  const dispatch = useAppDispatch();
  const listRef = useRef(null);
  const [status, hasMore, groupedDeployments] = useGroupedDeployments();
  const filterOptions = useSearchParams();
  const [openFilter, setOpenFilter] = useState(true);
  const [ref, inView] = useInView({
    rootMargin: "400px",
    root: listRef.current,
  });

  const isLoading = status === "loading";

  useEffect(() => {
    dispatch(fetchApplications());
  }, [dispatch]);

  useEffect(() => {
    dispatch(fetchDeployments(filterOptions));
  }, [dispatch, filterOptions]);

  useEffect(() => {
    if (inView && hasMore && isLoading === false) {

react-intersection-observer

Monitor if a component is inside the viewport, using IntersectionObserver API

MIT
Latest version published 23 days ago

Package Health Score

85 / 100
Full package analysis

Popular JavaScript code snippets

Find secure code to use in your application or website