import { IntersectionObservable, IntersectionObservableCallback } from "@lucnd96/react-intersection-observable";
const ComponentExample: React.ComponentType = () => {
  const onChange: IntersectionObservableCallback = (args) => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { entry, entries, observer } = args;
  };
  return (
    <div>
      <IntersectionObservable
        visibleClassName="visible-class"
        hiddenClassName="hidden-class"
        onChange={onChange}
      >
        <div>Test content</div>
      </IntersectionObservable>
    </div>
  );
};

import { useIntersectionObservable } from "@lucnd96/react-intersection-observable";

const HookExample: React.ComponentType = () => {
  const {
    ref, entry, observer, isVisible,
  } = useIntersectionObservable<HTMLHeadingElement>();

  useEffect(() => {
    // Do anything when entry change or observer change
  }, [entry, observer]);

  return (
    <div>
      <h1
        ref={ref}
        className={isVisible ? "visible-class" : "hidden-class"}
      >
        Test component
      </h1>
    </div>
  );
};