Skip to content

Latest commit

 

History

History
39 lines (28 loc) · 1.01 KB

README.md

File metadata and controls

39 lines (28 loc) · 1.01 KB

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>
)