InView

This is a component that uses IntersectionObserver to check whether something is within the viewport.


import { PrefetchQuery } from '@suspensive/react-query'
import { InView } from '@suspensive/react-dom'
 
const PostsPage = ({ posts }: { posts: Post[] }) => (
  <div>
    <h1>Posts</h1>
    {posts.map((post) => (
      <InView>
        {({ ref, isInView }) => (
          <div ref={ref}>
            {isInView ? (
              // 🚫 Due to the limitations of React hooks, we cannot use usePrefetchQuery here
              // usePrefetchQuery({
              //   queryKey: ['posts', post.id, 'comments'],
              //   queryFn: () => getPostComments(post.id),
              // })
 
              // ✅ Before entering the Post Comments page, we can call usePrefetchQuery for each post comments query.
              <PrefetchQuery
                queryKey={['posts', post.id, 'comments']}
                queryFn={() => getPostComments(post.id)}
              />
            ) : null}
            <h2>{post.title}</h2>
            <p>{post.description}</p>
            <Link to={`/posts/${post.id}/comments`}>See comments</Link>
          </div>
        )}
      </InView>
    ))}
  </div>
)

props.onInView, onInViewEnd

onInView is a callback function that is called when the element enters the viewport. onInViewEnd is a callback function that is called when the element leaves the viewport.

import { InView } from '@suspensive/react-dom'
import { useState } from 'react'

export const Example = () => {
  const [inViewIndexes, setInViewIndexes] = useState([])
  return (
    <>
      {Array.from({ length: 100 }).map((_, index) => (
        <InView
          key={index}
          onInView={() => setInViewIndexes((prev) => [...prev, index])}
          onInViewEnd={() =>
            setInViewIndexes((prev) => prev.filter((i) => i !== index))
          }
        >
          {({ ref, isInView }) => (
            <div
              ref={ref}
              style={{
                backgroundColor: isInView ? 'lightblue' : 'orange',
                border: '1px solid',
                padding: 50,
                textAlign: 'center',
              }}
            >
              {isInView ? 'In View' : 'Out of View'}
            </div>
          )}
        </InView>
      ))}
      <div style={{ position: 'fixed', top: 0, backgroundColor: 'red' }}>
        inViewIndexes: {inViewIndexes.join(', ')}
      </div>
    </>
  )
}

Open Sandbox

props.threshold

threshold sets the threshold for the IntersectionObserver.

import { InView } from '@suspensive/react-dom'

export const Example = () =>
  Array.from({ length: 100 }).map((_, index) => (
    <InView key={index} threshold={0.5}>
      {({ ref, isInView }) => (
        <div
          ref={ref}
          style={{
            backgroundColor: isInView ? 'lightblue' : 'orange',
            border: '1px solid',
            padding: 50,
            textAlign: 'center',
          }}
        >
          {isInView ? 'In View' : 'Out of View'}
        </div>
      )}
    </InView>
  ))

Open Sandbox

props.triggerOnce

triggerOnce is a boolean that determines whether the callback should be triggered only once. If set to true, the callback will only be triggered once when the element enters the viewport.

import { InView } from '@suspensive/react-dom'

export const Example = () =>
  Array.from({ length: 100 }).map((_, index) => (
    <InView key={index} triggerOnce>
      {({ ref, isInView }) => (
        <div
          ref={ref}
          style={{
            backgroundColor: isInView ? 'lightblue' : 'orange',
            border: '1px solid',
            padding: 50,
            textAlign: 'center',
          }}
        >
          {isInView ? 'In View' : 'Out of View'}
        </div>
      )}
    </InView>
  ))

Open Sandbox

props.skip

skip is a boolean that determines whether the callback should be skipped. If set to true, the callback will not be triggered.

import { Delay } from '@suspensive/react'
import { InView } from '@suspensive/react-dom'

export const Example = () => (
  <Delay ms={2000}>
    {({ isDelayed }) => (
      <div>
        <h1>skip: {isDelayed ? 'true' : 'false'}</h1>
        {Array.from({ length: 100 }).map((_, index) => (
          <InView key={index} skip={isDelayed}>
            {({ ref, isInView }) => (
              <div
                ref={ref}
                style={{
                  backgroundColor: isInView ? 'lightblue' : 'orange',
                  border: '1px solid',
                  padding: 50,
                  textAlign: 'center',
                }}
              >
                {isInView ? 'In View' : 'Out of View'}
              </div>
            )}
          </InView>
        ))}
      </div>
    )}
  </Delay>
)

Open Sandbox

props.delay

delay is a number that sets the delay for the IntersectionObserver. It is used to debounce the callback.

import { InView } from '@suspensive/react-dom'

export const Example = () =>
  Array.from({ length: 100 }).map((_, index) => (
    <InView key={index} delay={500}>
      {({ ref, isInView }) => (
        <div
          ref={ref}
          style={{
            backgroundColor: isInView ? 'lightblue' : 'orange',
            border: '1px solid',
            padding: 50,
            textAlign: 'center',
          }}
        >
          {isInView ? 'In View' : 'Out of View'}
        </div>
      )}
    </InView>
  ))

Open Sandbox