# @terra-dev/use-element-intersection

Latest version **0.20.1** (published 2021-07-15) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @terra-dev/use-element-intersection
pnpm add @terra-dev/use-element-intersection
yarn add @terra-dev/use-element-intersection
bun add @terra-dev/use-element-intersection
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.20.1 |
| Published | 2021-07-15 |
| First published | 2021-03-23 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ian |
| Maintainers | ssen |

## Links

- npm: https://www.npmjs.com/package/@terra-dev/use-element-intersection
- Repository: https://github.com/Anchor-Protocol/anchor-web-app
- Homepage: https://github.com/Anchor-Protocol/anchor-web-app/tree/master/packages/src/@terra-dev/use-element-intersection
- Issues: https://github.com/Anchor-Protocol/anchor-web-app/issues
- npm.io page: https://npm.io/package/@terra-dev/use-element-intersection

## Recent versions

- 0.20.1 (latest) — 2021-07-15
- 0.16.0-alpha.4 (canary) — 2021-06-13
- 0.20.0 — 2021-07-14
- 0.19.0 — 2021-07-09
- 0.18.0 — 2021-06-29
- 0.17.1 — 2021-06-28
- 0.17.0 — 2021-06-28
- 0.16.0 — 2021-06-21
- 0.16.0-alpha.3 — 2021-06-13
- 0.16.0-alpha.2 — 2021-06-13
- 0.16.0-alpha.1 — 2021-06-13
- 0.15.0 — 2021-06-01
- 0.14.0 — 2021-05-30
- 0.13.1 — 2021-05-15
- 0.13.0 — 2021-05-13
- … 15 more at https://npm.io/package/@terra-dev/use-element-intersection/versions

## README

# `@terra-dev/use-element-intersection`

<https://anchor-storybook.vercel.app/?path=/story/packages-use-element-intersection--basic>

## API

<!-- source index.ts --pick "ElementIntersectionParams useElementIntersection" -->

[index.ts](index.ts)

```ts
export function useElementIntersection({
  elementRef,
  threshold,
  root,
  rootMargin,
  observeOnce = false,
}: ElementIntersectionParams) {}

export interface ElementIntersectionParams extends IntersectionObserverInit {
  elementRef: RefObject<HTMLElement>;
  observeOnce?: boolean;
}
```

<!-- /source -->

## Examples

<!-- source __stories__/*.stories.tsx -->

[\_\_stories\_\_/use-element-intersection.stories.tsx](__stories__/use-element-intersection.stories.tsx)

```tsx
import { useElementIntersection } from '@terra-dev/use-element-intersection';
import { useRef } from 'react';
import styled from 'styled-components';

export default {
  title: 'packages/use-element-intersection',
};

export const Basic = () => {
  const elementRef = useRef<HTMLElement>(null);

  const intersection = useElementIntersection({ elementRef, threshold: 0.2 });

  return (
    <div>
      <div style={{ backgroundColor: 'red', height: 1500 }} />
      <div
        ref={elementRef as any}
        style={{ backgroundColor: 'white', height: 500 }}
      />
      <div style={{ backgroundColor: 'blue', height: 1500 }} />
      <Intersecting>
        {intersection?.isIntersecting
          ? 'White block is visible'
          : 'White block is invisible'}
      </Intersecting>
    </div>
  );
};

export const Observe_Once = () => {
  const elementRef = useRef<HTMLElement>(null);

  const intersection = useElementIntersection({
    elementRef,
    threshold: 0.5,
    observeOnce: true,
  });

  return (
    <div>
      <div style={{ backgroundColor: 'red', height: 1500 }} />
      <div
        ref={elementRef as any}
        style={{ backgroundColor: 'white', height: 500 }}
      />
      <div style={{ backgroundColor: 'blue', height: 1500 }} />
      <Intersecting>
        {intersection?.isIntersecting
          ? 'White block is appeared'
          : 'White block is still not appeared'}
      </Intersecting>
    </div>
  );
};

const Intersecting = styled.div`
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: grid;
  place-content: center;
  border-radius: 15px;
  padding: 20px;
`;
```

<!-- /source -->

---
_Source: https://npm.io/package/@terra-dev/use-element-intersection · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._