TrackScroll

import { TrackScroll } from 'mentiq-sdk';

function App() {
  return (
    <TrackScroll>
      <main>
        <Hero />
        <Features />
        <Pricing />
        <Footer />
      </main>
    </TrackScroll>
  );
}

// Track at 10%, 25%, 50%, 75%, 90%, and 100%
<TrackScroll milestones={[10, 25, 50, 75, 90, 100]}>
  <ArticleContent />
</TrackScroll>

function BlogPost({ post }) {
  return (
    <TrackScroll milestones={[25, 50, 75, 100]}>
      <article>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </article>
    </TrackScroll>
  );
}

function LandingPage() {
  return (
    <TrackScroll milestones={[20, 40, 60, 80, 100]}>
      <div>
        <HeroSection />
        <ProductDemo />
        <Testimonials />
        <CallToAction />
      </div>
    </TrackScroll>
  );
}

{
  milestone: number,           // The milestone percentage reached
  scroll_percentage: number    // The actual scroll percentage (rounded)
}

const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercentage = (scrollTop / scrollHeight) * 100;