A DOM measurement library with a powerful API that makes it easy to create complex UI interactions
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>
)