Target Observer

Table of Contents

• Introduction
• Component API
  • InViewProvider
  • useInView
  • ObserveZone
  • Target
• Examples
  • React + Css
  • React + Tailwind Css

Target Observer is designed to help developers efficiently monitor and manage the visibility of elements within the viewport.

It provides a set of tools including the useInView hook, InViewProvider, Target, and ObserveZone components. These tools enable seamless tracking of when specific elements, identified as "targets" enter or exit the viewport.

With Target Observer, you can easily trigger animations, lazy load content, or handle visibility-based logic in your application. The library is optimized for performance and ease of use, making it a robust solution for building responsive and dynamic user interfaces.

Checkout the demo here.

Component API

InViewProvider

The InViewProvider component is a wrapper for tracking the visibility of multiple Target components within the viewport. The component monitors when each target enters or exits the viewport, enabling you to manage and respond to the in-view state of these elements within your application.

Property	Default	Description
targetIds	-	An array of strings that specifies the IDs of the Target components to be tracked by the InViewProvider.
firstTargetActiveOnMount	true	By default, the first target is activated when the component mounts. If set to false, it will only update once the user starts scrolling and the target enters the viewport.

useInView

The useInView hook tracks when a target element enters the viewport, making it ideal for dynamically updating the styling of items or chapters in a table of contents on a documentation site.

ObserveZone

The ObserveZone is an invisible component that defines a specific area within which visibility of child elements is tracked.

Property	Default	Description
height	50vh	An optional property for adjusting the observing area's height.
className	-	An optional property for defining class names. Use only for testing the component.

Target

The Target component represents an element whose visibility is tracked within the ObserveZone. Each Target should have a unique ID that matches an entry in the targetIds array provided to the InViewProvider.

The component’s visibility state can be used to trigger actions, such as animations or lazy loading, based on whether the target is in view or out of view.

Property	Default	Description
id	-	The id of the component to track and trigger state updates.
as	div	The element or component the Target should render as.
entryThreshold	0.5	The percentage of observing zone height that should be used to trigger the observer. The target element when inside this area will update the inView property to true. Accepts value between 0 and 1. Min is 0.1 and Max is 0.9.

Examples:

React with CSS

1import clsx from 'clsx'
2import { useInView, InViewProvider, ObserveZone, Target } from 'target-observer'
3
4const targetIds = [
5    'section#1',
6    'section#2',
7    'section#3',
8    'section#4',
9    'section#5'
10]
11export default function Example() {
12    return (
13        <InViewProvider targetIds={targetIds}>
14            <div className='container'>
15                <Navigation />
16
17                {/* must use position:relative in parent for ObserveZone to work */}
18                <div className='target-wrapper'>
19                    {/* add this invisible component to track the target */}
20                    <ObserveZone
21                        // optional height property, default is 50vh
22                        height='70vh'
23                        // optional className property, use only for testing
24                        className='observer'
25                    />
26
27                    {targetIds.map((targetId) => (
28                        <Target
29                            key={targetId}
30                            // must specify the id property for target to work
31                            id={targetId}
32                            // the html element you want to render
33                            as='section'
34                            // add styling to your target
35                            className='target'
36                            // the height in percent of observing zone to trigger inView state
37                            // default is 0.5 (50 percent)
38                            entryThreshold={0.3}
39                        >
40                            Target: {targetId}
41                        </Target>
42                    ))}
43                </div>
44            </div>
45        </InViewProvider>
46    )
47}
48
49function Navigation() {
50    const inView = useInView() // returns a record with boolean values
51
52    return (
53        <nav>
54            <ul>
55                {targetIds.map((targetId) => {
56                    return (
57                        <li
58                            key={targetId}
59                            className={clsx({
60                                'list-active': inView[targetId]
61                            })}
62                        >
63                            <a href={'#' + targetId}>{targetId}</a>
64                        </li>
65                    )
66                })}
67            </ul>
68        </nav>
69    )
70}

1nav {
2    position: sticky;
3    top: 2.5rem;
4    height: 100vh;
5}
6
7ul {
8    list-style-type: none;
9}
10
11li {
12    width: 8rem;
13    text-align: center;
14    color: black;
15}
16
17a {
18    text-decoration: none;
19    font-size: 18px;
20    color: inherit;
21}
22
23li:not(:first-child):not(:last-child),
24section:not(:first-child):not(:last-child) {
25    margin-top: 16px;
26    margin-bottom: 16px;
27}
28
29.list-active {
30    font-weight: 700;
31    padding: 0.25rem 0 0.25rem 0;
32    background-color: #ef4444;
33    color: white;
34}
35
36.container {
37    max-width: 80rem;
38    width: 100%;
39    margin-left: auto;
40    margin-right: auto;
41    padding: 1.25rem;
42    display: flex;
43    gap: 2.5rem;
44}
45
46.target-wrapper {
47    position: relative;
48    width: 100%;
49}
50
51.target {
52    height: 90vh;
53    border: 4px solid #e5e7eb;
54    padding: 1.25rem;
55}
56
57.observer {
58    outline: 4px solid rgba(239, 68, 68, 0.2);
59    outline-offset: 8px;
60}

React with Tailwind CSS

1import clsx from 'clsx'
2import { useInView, InViewProvider, ObserveZone, Target } from 'target-observer'
3
4const targetIds = [
5    'section#1',
6    'section#2',
7    'section#3',
8    'section#4',
9    'section#5'
10]
11export default function Example() {
12    return (
13        <InViewProvider targetIds={targetIds}>
14            <div className='h-screen w-full'>
15                <div className='max-w-7xl mx-auto w-full p-5 flex gap-10'>
16                    <Navigation />
17                    {/* must use position:relative in parent for ObserveZone to work */}
18                    <div className='relative w-full space-y-5'>
19                        {/* add this invisible component to track the target */}
20                        <ObserveZone
21                            // optional height property, default is 50vh
22                            height='70vh'
23                            // optional className property, use only for testing
24                            className='ring-4 ring-offset-8 ring-red-500/20'
25                        />
26
27                        {targetIds.map((targetId) => (
28                            <Target
29                                key={targetId}
30                                // must specify the id property for target to work
31                                id={targetId}
32                                // the html element you want to render
33                                as='section'
34                                // add styling to your target
35                                className='h-[90vh] border-4 p-5 w-full'
36                                // the height in percent of observing zone to trigger inView state
37                                // default is 0.5 (50 percent)
38                                entryThreshold={0.3}
39                            >
40                                Target: {targetId}
41                            </Target>
42                        ))}
43                    </div>
44                </div>
45            </div>
46        </InViewProvider>
47    )
48}
49
50function Navigation() {
51    const inView = useInView() // returns a record with boolean values
52    return (
53        <div className='sticky top-10 h-screen'>
54            <ul className='space-y-4'>
55                {targetIds.map((targetId) => (
56                    <li
57                        key={targetId}
58                        className={clsx('text-center w-32', {
59                            'font-bold py-1 bg-red-500 text-white':
60                                inView[targetId]
61                        })}
62                    >
63                        <a href={'#' + targetId}>{targetId}</a>
64                    </li>
65                ))}
66            </ul>
67        </div>
68    )
69}

Issues

Please file an issue for bugs, missing documentation, or unexpected behavior. Don't hesitate to make a PR for any issue.

File an issue