prop-for-that
v0.7.2
Published
Expose what JavaScript knows but CSS can't see, as batched, diffed CSS custom properties.
Downloads
839
Maintainers
argyleinkReadme
prop-for-that
Expose what JavaScript knows but CSS can't see — as live CSS custom properties.
Docs · Demos · Changelog · llms.txt
Sliders, pointer position, element visibility, viewport size, battery, network, sensors — JavaScript can read all of it; CSS can't. prop-for-that writes that runtime state into --live-* and --const-* custom properties — batched and diffed down to one setProperty per frame — so your CSS can compose and react to it with plain calc() and var().
Zero dependencies. TypeScript. ESM + CJS. SSR-safe.
npm i prop-for-thatQuick start
<script type="module">import 'prop-for-that/auto'</script>
<input type="range" data-props-for="range" />/* the slider paints itself from its own value — no event listeners, no render loop */
input {
background: hsl(calc(var(--live-value-pct) * 120) 80% 50%);
}Bind any element with data-props-for="key …" and read its --live-* properties in CSS. That's the whole idea.
Why
- CSS does the work. No per-element event handlers or render loops — bind once, compose in stylesheets.
- Fast by design. One
requestAnimationFrameflush per frame — idle when nothing changes, frozen while the tab is hidden — plus write-on-change diffing and a single sharedResizeObserver/IntersectionObserverfor the whole page. Element sources pause while their element is off screen. - Ship only what you use. Four lightweight core sources are built in; everything else is an opt-in, tree-shakeable plugin — and under
autoeach plugin loads on demand, the moment adata-props-forattribute asks for it. - Plays with the platform. Opt into typed
@propertyvalues for interpolation, or FOUC-safe constants written before first paint. - Tiny and dependency-free, in every bundle format.
What it can read
Core (built in): viewport, element size, visibility, and <input type="range"> values.
Plugins (opt-in): pointer position, battery, network, online status, page focus & visibility, navigation type, FPS, clock, scroll velocity, device orientation / motion, geolocation, CPU pressure, media playback, form & field state, select & color-picker values, and dominant + accent colors extracted from images and video — 20+ in all.
→ Every source, every property, and live demos are in the docs.
Entry points
| Import | What it does |
| --- | --- |
| prop-for-that/auto | Zero-config & declarative: binds every data-props-for element — globals included, via <html data-props-for="…"> — loading plugin sources on demand, kept in sync with the DOM. Use as <script type="module">. |
| prop-for-that | Imperative API — propsFor(), register(), configure() — for explicit control and teardown. |
| prop-for-that/head | Synchronous, FOUC-safe constants (scrollbar width, DPR, core count, device memory) before first paint. |
| prop-for-that/plugins | The opt-in plugin catalog. |
autosees the light DOM only (not shadow roots — bind those withpropsFor(el, …)), and lazy-loads plugin chunks, so from a CDN use one that serves thedistfiles verbatim (unpkg / jsDelivr), not a rewriting CDN.
Full API and concepts: prop-for-that.netlify.app/docsite.
For LLMs / AI tools
A condensed, single-file reference — entry points, the full variable catalog, recipes, and gotchas — lives at llms.txt, hosted at prop-for-that.netlify.app/llms.txt and shipped in the npm package (node_modules/prop-for-that/llms.txt).
License
MIT © Adam Argyle