ui-observer

A DOM measurement library with a powerful API
that makes it easy to create complex UI interactions.

This repo contains two packages: core (ui-observer) and a react implementation (react-ui-observer).

Why ui-observer?

• Speed: Batched DOM updates and no layout trashing.
• Power: Measure what you need and then react to changes.

Getting Started

yarn add react-ui-observer
# or yarn add ui-observer

and then use it to create magic

const [scrollYValue, hasScrolledEnough] = useObserver(
  observe(scrollY(), (scrollY: number) => [scrollY, scrollY > 300])
)

return (
  <div style={{ height: 3000 }}>
    <div style={{ position: 'fixed', top: 15, right: 15, color: hasScrolledEnough ? 'cyan' : 'inherit' }}>
      {`Scrolled ${scrollYValue}px`}
    </div>
  </div>
)