---
title: "Core — useIntersection"
canonical: https://sky-ui.cf.sky.com/core/hooks/use-intersection
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Core — useIntersection

```js
import { useIntersection } from '@sky-uk/ui-core';
```

---

The `useIntersection` hook can be used to determine whether or not a component is intersecting with the viewport. The optional `options` object allows you to controls when the observer's callback function is invoked. [See MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer)

---

```tsx
function Example() {
  const ref = React.useRef();
  const [content, setContent] = React.useState('Threshold not reached');

  const  { intersecting} = useIntersection({
    ref,
    intersectionOptions: {
      threshold: 0.5
    }
  })

  React.useEffect(() => {
    if (intersecting) {
      setContent('Threshold reached');
      return;
    }
    setContent('Threshold not reached');
  }, [intersecting])

  return (
    <Box $position="relative" $height="140vh">
      <Box $position="absolute" $top="calc(50% - 10vh)" ref={ref}>
        <Flex $flexDirection="column" $justifyContent="space-between" $height="20vh">
          <Text>{content}</Text>
          <Text>{content}</Text>
        </Flex>
      </Box>
    </Box>
  );
}
```