Floating CTA using `react-use` `useIntersection`

page.tsx

import React from 'react';
import { useIntersection } from 'react-use';

const App = () => {
  const intersectionRef = React.useRef(null);

  const intersection = useIntersection(intersectionRef, {
    root: null,
    rootMargin: '0px',
    threshold: 1,
  });

  return (
    <div>
      <div className="px-4 py-8 sm:px-10" ref={intersectionRef}>
        In the viewport
      </div>
      {Array.from({ length: 100 }, (_, i) => (
        <>
          {i}
          <br key={i} />
        </>
      ))}
      <div className="fixed bottom-0 bg-white w-full" style={intersection && intersection.intersectionRatio < 1 ? {} : { display: 'none' }}>
        Floating CTA
      </div>
    </div>
  );
};

export default App;