@prtcl/plonk-hooks 1.0.4 → 1.0.6

package/README.md

@@ -1,3 +1,46 @@
 # @prtcl/plonk-hooks
 
-React Hook wrappers for [plonk](https://github.com/prtcl/plonk)
+React hook wrappers for [`@prtcl/plonk`](https://www.npmjs.com/package/@prtcl/plonk). Manages timer lifecycle on mount/unmount so you can use plonk's timers and generators directly in components.
+
+## Installation
+
+```
+npm i @prtcl/plonk @prtcl/plonk-hooks
+```
+
+Requires React 17–19 as a peer dependency.
+
+## Hooks
+
+- **`useMetro`** — interval-based timer loop
+- **`useFrames`** — `requestAnimationFrame`-based loop
+- **`usePrevious`** — tracks the previous value of a variable
+
+## Quick example
+
+```typescript
+import { useRef } from 'react';
+import { Env } from '@prtcl/plonk';
+import { useFrames } from '@prtcl/plonk-hooks';
+
+const env = new Env({ duration: 2000, from: 0, to: 1 });
+
+function FadeIn({ children }) {
+  const ref = useRef(null);
+
+  const frames = useFrames(() => {
+    if (ref.current) {
+      ref.current.style.opacity = `${env.next()}`;
+    }
+    if (env.done()) {
+      frames.stop();
+    }
+  });
+
+  return <div ref={ref}>{children}</div>;
+}
+```
+
+## Documentation
+
+See the full [API Reference](https://github.com/prtcl/plonk/blob/main/docs/API.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prtcl/plonk-hooks",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "React hook wrappers for plonk",
   "author": "Cory O'Brien <cory@prtcl.cc>",
   "license": "MIT",
@@ -23,7 +23,7 @@
     "test": "vitest --browser.name=chrome --browser.headless --watch=false"
   },
   "dependencies": {
-    "@prtcl/plonk": "1.0.4",
+    "@prtcl/plonk": "1.0.6",
     "client-only": "^0.0.1"
   },
   "peerDependencies": {