Skip to content

XObserver eliminates the usage of multiple instances of IntersectionObserver, by providing a scope based initialization of single IntersectionObsever and a few methods to intract with it.

License

Notifications You must be signed in to change notification settings

msc24x/xobserver

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

XObserver

Eliminates multiple instances of IntersectionObserver in your application and allows element level callbacks easily.

npm version

How does it work?

  1. XObserver simply maintains a global repository of the IntersectionObservers your application will use. Each global instance have a unique identifier called scope. Those instances can be ensured to be available by calling the .ping method under that particular scope.
  2. Unlike the traditional flow, the callback function of the observer is provided at the element level and not the instance level. This allows the application to assign separate callback for each element, This is done by .subscribe
  3. And yes, there an .unsubscribe method equivalent to the traditional .unobserve

Installation

yarn add @msc24x/xobserver

or

npm i @msc24x/xobserver

Methods

ping

XObserver.ping(scope: string, options?: IntersectionObserverInit, defCallback?: XObserverCallback)): void

Initialize/prepare one IntersectionObserver per given scope. A default callback for each subscriber can also be provided at the scope level, using defCallback. This can be called multiple times, only the first call will create an actual instance.

  • A new scope must be pinged if another set of options is required
  • defCallback for an element will be ignored if a callback was provided for that element during .subscribe

subscribe

XObserver.subscribe(scope: string, element: Element, callback?: XObserverCallback): void

Subscribe the element to the observer. Be aware that the callback provided is invoked only for given particular element.

  • The element must have a unique ID assigned to it

unsubscribe

XObserver.unsubscribe(scope: string, element: Element): void

Equivalent to calling .unobserve on IntersectionObserver.

Example (React)

A component that is being animated when in view and being hidden when out of view. The number of actual IntersectionObserver instances, in this case, will remain 2, no matter how many elements of this component is rendered.

export default function MyComponent(
	props: {id:string}
) {
	const [inView, setInView] = useState(false);
	const ref = useRef<HTMLDivElement>();

	useEffect(() => {
		XObserver.ping("appearance", { threshold: [0.3, 0] });

		const target = ref.current!;

		XObserver.subscribe("appearance", target, (entry) =>
			entry.isIntersecting && entry.intersectionRatio > 0.2
				? setInView(true)
				: setInView(false)
		);

		return () => {
			XObserver.unsubscribe("appearance", target);
		};
	}, []);

    return <div id={props.id} ref={ref as MutableRefObject<HTMLDivElement>}>In view : {inView}</div>
}

About

XObserver eliminates the usage of multiple instances of IntersectionObserver, by providing a scope based initialization of single IntersectionObsever and a few methods to intract with it.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published