# Overview

The `useIntersection` hook allows you to lazy load any resource when it is near to the viewport. It uses the [IntersectionObserver](🔗) under the hood.

# Import

The `useIntersection` hook can be imported directly from the `frontend-ui` package, which is pre-installed in your Shogun Frontend store.


# Usage
Below is an example of how to use the `useIntersection` hook:

# Configuration
The `useIntersection` hook accepts two parameters; `elementRef` and an `options` object with `rootMargin` and `disabled`.
nametypedefault valuedescription
`elementRef``React.Ref`
<a href="https://reactjs.org/docs/hooks-reference.html#useref" target="_blank">The element reference</a>.
`options``object`
An object of configuration options. It accepts two keys: `rootMargin` and `disabled`.
`options.rootMargin``string``200px`<a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin" target="_blank">Margin around the root</a>. This is the distance from the viewport when the content should start loading.
`options.disabled``boolean``false`To disable `IntersectionObserver` and load the resource instantly.
# Return values
The `useIntersection` hook will return the following values:
nametypedescription
`visible``boolean`Determine whether the element is visible.
`setVisible``() => bolean`Setter to control the `visible` property.
# Further resources
  • <a href="https://web.dev/lazy-loading-best-practices/#wrong-fold" target="_blank">Mind the fold</a>
  • <a href="https://www.optimizely.com/optimization-glossary/below-the-fold/" target="_blank">Below the fold</a>