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.threshold

threshold sets the threshold for the IntersectionObserver.

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

export const Example = () =>
  Array.from({ length: 100 }).map((_, index) => (
    <InView threshold={0.5}>
      {({ ref, inView }) => (
        <div
          key={index}
          ref={ref}
          style={{
            backgroundColor: inView ? 'lightblue' : 'orange',
            border: '1px solid',
            padding: 50,
            textAlign: 'center',
          }}
        >
          {inView ? '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 triggerOnce>
      {({ ref, inView }) => (
        <div
          key={index}
          ref={ref}
          style={{
            backgroundColor: inView ? 'lightblue' : 'orange',
            border: '1px solid',
            padding: 50,
            textAlign: 'center',
          }}
        >
          {inView ? '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 skip={isDelayed}>
            {({ ref, inView }) => (
              <div
                key={index}
                ref={ref}
                style={{
                  backgroundColor: inView ? 'lightblue' : 'orange',
                  border: '1px solid',
                  padding: 50,
                  textAlign: 'center',
                }}
              >
                {inView ? '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 delay={500}>
      {({ ref, inView }) => (
        <div
          key={index}
          ref={ref}
          style={{
            backgroundColor: inView ? 'lightblue' : 'orange',
            border: '1px solid',
            padding: 50,
            textAlign: 'center',
          }}
        >
          {inView ? 'In View' : 'Out of View'}
        </div>
      )}
    </InView>
  ))

Open Sandbox