Scroll State

import { createScrollState } from 'seitu/web'

const scroll = createScrollState({
  element: document.querySelector('.container'),
  direction: 'vertical',
  threshold: 10,
})

scroll.subscribe(state => {
  console.log(state.top.reached)
  console.log(state.top.remaining)
  console.log(state.bottom.reached)
  console.log(state.bottom.remaining)
})

const state = scroll.get()
console.log(state)

'use client'

import * as React from 'react'
import { createScrollState } from 'seitu/web'
import { useSubscription } from 'seitu/react'

function Layout() {
  const ref = React.useRef<HTMLDivElement>(null)
  const state = useSubscription(() => createScrollState({
    element: () => ref.current,
    threshold: 10,
  }))

  return (
    <div ref={ref}>
      {state.top.reached ? 'at the top' : 'scrolled'}
    </div>
  )
}

'use client'

import * as React from 'react'
import { createScrollState } from 'seitu/web'
import { useSubscription } from 'seitu/react'

function Layout() {
  const [ref, setRef] = React.useState<HTMLDivElement | null>(null)
  const state = useSubscription(() => createScrollState({
    element: ref,
    threshold: 10,
  }), { deps: [ref] })

  return (
    <div ref={setRef}>
      {state.top.reached ? 'at the top' : 'scrolled'}
    </div>
  )
}